前言

一、create-react-app 脚手架快速搭建 react 项目

1、安装 create-react-app

2、检测 create-react-app 是否安装成功

3、创建 react 项目

二、generator-react-webpack 脚手架搭建 react 项目

1、安装 yeoman

2、安装 generator-react-webpack

3、创建 react 项目

三、webpack 逐步构建 react 项目

1、新建一个文件夹，比如：react-webpack，并进入这个文件夹

2、初始化项目

3、跑通 webpack

（1）、安装 webpack 执行所需要的包环境

（2）在项目根目录新建 webpack.config.js 文件，在其中指定入口和出口文件

（3）、在根目录新建入口文件（index.html），并引入 webpack 指定的出口文件（index.js）

（4）、配置项目打包命令——build

（5）、测试 webpack 基础配置

4、开发服务器配置

（1）、安装 webpack-dev-server

（2）、配置 webpack.config.js 文件

（3）、在 packeage.json 里增加一个 scripts 命令——server。

（4）、测试开发服务器配置

5、热更新（可选）

（1）、在出口文件 index.js 中添加一个配置——publicPath

（2）、修改入口文件 index.html 引入的出口文件 index.js 的 src 地址

（3）、热更新测试

6、Babel 的安装配置

（1）、安装 Babel 的相关包

（2）、配置 module

7、编写 React 文件测试

（1）、安装 React 和 React-dom 包

（2）、改写 app/index.js 文件，把原来原生的 JavaScript 代码改成 React 代码。

8、模式的配置使用

9、常用 webpack 插件

1、extract-text-webpack-plugin

后记

前言

构建React项目的几种方式：

create-react-app 脚手架快速搭建 react 项目（推荐）。
generator-react-webpack 脚手架搭建 react 项目。
webpack 一步一步构建 react 项目。

一、create-react-app 脚手架快速搭建 react 项目

Create React App 中文文档

要求：Node>=8.10 并且 npm>=5.6

建议：Node>=10.14.2，否则会报错：error babel-jest@26.6.3: The engine "node" is incompatible with this module. Expected version ">= 10.14.2". Got "10.13.0"

1、安装 create-react-app

npm install -g create-react-app       // Windows
sudo npm install -g create-react-app  // Linux

2、检测 create-react-app 是否安装成功

create-react-app -V // 注意：V 是大写的

3、创建 react 项目

npx create-react-app <项目名称>// 注意：名字不能包含大写字母。我的是 my-app。
cd my-app
npm start

说明：npx 是 npm 5.2+ 附带的 package 运行工具。

默认，create react app 创建的项目是看不到 webpack 相关的配置的，如果想要配置 webpack，只能先 eject 一下，执行命令来释放 webpack 的配置文件：

npm run eject

之后，你可能会遇到一个问题：Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production".

我参考了 github 上前辈的解决方案——在 package.json 文件中的 eslintConfig 对象里新增 parserOptions 选项（仅供参考）：

如果没有立即生效，请重启下 VSCode 试试。若还不行，请君开疆拓土。

二、generator-react-webpack 脚手架搭建 react 项目

1、安装 yeoman

npm install -g yo

2、安装 generator-react-webpack

npm install -g generator-react-webpack

3、创建 react 项目

创建一个文件夹，比如：react-demo，并进入这个文件夹：

mkdir react-demo
cd react-demo

用生成器生成我们的项目目录：

yo react-webpack

运行 react 项目：

npm start

三、webpack 逐步构建 react 项目

1、新建一个文件夹，比如：react-webpack，并进入这个文件夹

mkdir react-webpack
cd react-webpack

2、初始化项目

npm init -y

【拓展】

关联远程仓库：

git remote add origin <url>

3、跑通 webpack

（1）、安装 webpack 执行所需要的包环境

npm i webpack webpack-cli html-webpack-plugin -D

（2）在项目根目录新建 webpack.config.js 文件，在其中指定入口和出口文件

var path =require('path');
module.exports = {//入口文件entry:'./src/index.js',//出口文件output:{path:path.resolve(__dirname,'dist'),filename:'bundle.js'}
}

（3）、在根目录新建入口文件（index.html），并引入 webpack 指定的出口文件（index.js）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>React全家桶-jspang</title>
</head>
<body></body>
<!--引入出口文件-->
<script src="./dist/index.js"></script>
</html>

（4）、配置项目打包命令——build

打开package.json文件，在 scripts 属性中加入 build 命令：

"scripts": {"build": "rm -rf dist/* && webpack"
},

rm -rf dist/* && webpack：由于每次重新执行 webpack，都会生成一个 js 文件，所以为了不占用过多内存，我们每次执行 webpack 前，应该先删除现有的 dist 文件夹，再执行 webpack。

（5）、测试 webpack 基础配置

在入口文件（/app/index.js）中写入下列代码：

function component(){var element = document.createElement('p');element.innerHTML = ('Hello world');return element;
}document.body.appendChild(component());

在终端中执行打包命令：

npm run build

就可以看到打包结果了。如果没有出现错误，在浏览器中打开，可以看到我们的编写结果。

到这部为止，我们正确安装了webpack，并进行了出入口的配置，也看到了webpack 的输出结果。

4、开发服务器配置

（1）、安装 webpack-dev-server

npm i webpack-dev-server -D

（2）、配置 webpack.config.js 文件

devServer:{contentBase: './',host: 'localhost',compress: true,port: 3000
}

（3）、在 packeage.json 里增加一个 scripts 命令——server。

"scripts": {"start": "webpack-dev-server --open""build": "rm -rf dist/* && webpack"    
},

说明：这里的 --open 是直接打开浏览器的意思。

（4）、测试开发服务器配置

在终端执行：

npm run start

报错：error code error errno 1 error react-webpack@1.0.0 server: `webpack-dev-server --open`

解决报错

5、热更新（可选）

（1）、在出口文件 index.js 中添加一个配置——publicPath

output:{filename:'index.js',path:path.resolve(__dirname,'dist'),publicPath:'temp/'
},

（2）、修改入口文件 index.html 引入的出口文件 index.js 的 src 地址

将 dist 改为 temp 即可：

<script src="./temp/index.js"></script>

（3）、热更新测试

重新运行项目，修改看看是否实现了热更新。

6、Babel 的安装配置

（1）、安装 Babel 的相关包

我们一般需要支持 es2015 和 React，所以要安装四个包：babel-core、babel-loader、babel-preset-es2015 和 babel-preset-react。

npm i babel-core babel-loader babel-preset-es2015 babel-preset-react -D

（2）、配置 module

在 webpack.config.js 里配置 module 的 loder:

module:{loaders:[{test:/\.js$/,exclude:/node_modules/,loaders:"babel-loader",query:{presets:['es2015','react']}}]
}

通过上边的步骤，webpack 已经基本配置完成了。

7、编写 React 文件测试

（1）、安装 React 和 React-dom 包

npm install --save react  react-dom

（2）、改写 app/index.js 文件，把原来原生的 JavaScript 代码改成 React 代码。

// index.js
import React from 'react';
import ReactDOM from 'react-dom';ReactDOM.render(<p>Hello world</p>,document.getElementById("app")
);

在入口文件 index.html 中增加一个 div 标签，并把 id 设置成 app。

// index.html
<div id="app"></div>

都配置完了，我们可以用之前配置好的 npm run server 命令进行预览了。

如果在浏览器中看到了 "Hello world" 这段文字，说明我们的配置成功了，以后就可以愉快的进行开发了。

8、模式的配置使用

选项	描述
`development`	会将 `DefinePlugin` 中 `process.env.NODE_ENV` 的值设置为 `development`. 为模块和 chunk 启用有效的名。
`production`	会将 `DefinePlugin` 中 `process.env.NODE_ENV` 的值设置为 `production`。为模块和 chunk 启用确定性的混淆名称，`FlagDependencyUsagePlugin`，`FlagIncludedChunksPlugin`，`ModuleConcatenationPlugin`，`NoEmitOnErrorsPlugin` 和 `TerserPlugin` 。
`none`	不使用任何默认优化选项