webpack 4 的 30 个步骤构建 react 开发环境

将 react 和 webpack4 进行结合，集 webpack 的优势于一身，从 0 开始构建一个强大的 react 开发环境。

其实很多人都有 一看就会，一做就废 的特点(当然也包括我在内)，这个时候，你需要制定一个略微详细的计划，就比如我这篇会首先列出知识点，列出大的方向，制定思维导图，然后根据思维导图编写代码，计划明确，就会事半功倍，因此，希望你可以跟着本篇循序渐进的跟着代码走一遍，不管是真实开发，还是面试，都有的扯。

一、基础配置

1、init 项目

mkdir react-webpack4-cook

cd react-webpack4-cook

mkdir src

mkdir dist

npm init -y

2、安装 webpack, 配置webpack.config.js

yarn add webpack webpack-cli webpack-dev-server -D

touch webpack.config.js

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

3、安装 react 并编写代码

cd src

cnpm i react react-router-dom -S

4、babel 编译 ES6、 JSX 等

cnpm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react -D

cnpm i @babel/polyfill @babel/runtime

新建.babelrc文件

5、按需引入polyfill

在 src 下的 index.js 中全局引入 @babel/polyfill 并写入 ES6 语法，但是这样有一个缺点：

全局引入 @babel/polyfill 的这种方式可能会导入代码中不需要的 polyfill，从而使打包体积更大

更改 .babelrc，只转译我们使用到的

npm install core-js@2 @babel/runtime-corejs2 -S

将全局引入这段代码注释掉

这就配置好了按需引入。配置了按需引入 polyfill 后，用到 es6 以上的函数，babel 会自动导入相关的 polyfill，这样能大大减少打包编译后的体积。

6、插件 CleanWebpackPlugin

你经过多次打包后会发现，每次打包都会在 dist 目录下边生成一堆文件，但是上一次的打包的文件还在，我们需要每次打包时清除 dist 目录下旧版本文件

cnpm install clean-webpack-plugin -D

7、使用插件 HtmlWebpackPlugin

经过上一步的操作，index.html 也被清除了。因此我们将使用 HtmlWebpackPlugin 插件，来生成 html，并将每次打包的 js 自动插入到你的 index.html 里面去，而且它还可以基于你的某个 html 模板来创建最终的 index.html，也就是说可以指定模板哦。

cnpm install html-webpack-plugin -D

cd src

touch template.html