react+webpack(一键创建，简单了解)

一键创建React项目

1、全局安装create-react-app脚手架

npm install -g create-react-app

2、运行如下命令，创建一个react项目，完成后，自动生成以下目录结构

命令：

create-react-app myreact（myreact为自定义项目名）

目录结构：

|—— node_modules
|—— public
|—— src
|—— .gitinore
|—— package.json
|—— package-lock.json
|—— README.md

3、执行npm run start，让你的第一个项目运行起来

Webpack配置:

1、运行npm run eject命令，将webpack配置文件暴露出来

命令运行完后，目录结构有所变更

|—— config
|—— node_modules
|—— public
|—— scripts
|—— src
|—— .gitinore
|—— package.json
|—— package-lock.json
|—— README.md

2、全局安装Webpack

npm install -g webpack

3、 项目编译（打包）,得到根目录下build文件夹

注意：在根目录下进行打包

npm run build

4、启动打包后文件./build/index.html

(1)npm install -g serve,

(2)再cd build,

(3)最后npx serve

成功示例：

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   - Local:            http://localhost:57595     │
   │   - On Your Network:  http://10.11.1.164:57595   │
   │                                                  │
   │   This port was picked because 3000 is in use.   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │
   └──────────────────────────────────────────────────┘
   

注意：

打包后，我们如果直接打开index.html文件，是不行的，会报错。

因为正确的做法是在node的服务端以服务器的形式（域名+端口+路径）来访问。