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 语法 ，但是这样有一个缺点：

1. 全局引入 @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

8、使用 source-map，对 devtool 进行优化

webpack 中 devtool 选项用来控制是否生成，以及如何生成 source map。简言之，source map 就是帮助我们定位到错误信息位置的文件。正确的配置source map，能够提高开发效率，更快的定位到错误位置。

在 webpack.config.js 中选项 mode 下加上如下这句话：

devtool:"cheap-module-eval-source-map",

devtool:"cheap-module-source-map",

9、使用 WebpackDevServer, 配置开发服务器

webpack-dev-server 就是在本地为搭建了一个小型的静态文件服务器，有实时重加载的功能，为将打包生成的资源提供了web服务

打包js

支持ES6,react,vue

处理css,sass,以及css3属性前缀

编译css和scss：

        cnpm install css-loader style-loader sass-loader node-sass -D

集成 postcss：

        cnpm install postcss-loader postcss-cssnext -D

处理css

动态卸载和加载CSS

style-loader为 css 对象提供了use()和unuse()两种方法可以用来加载和卸载css

比如实现一个点击切换颜色的需求，修改index.js

处理sass

提取css文件为单独文件

产出html

处理引用的第三方库,暴露全局变量

webpack.ProvidePlugin参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库， 可以直接在全局使用 $ 变量

code splitting、懒加载(按需加载)

说白了就是在需要的时候在进行加载，比如一个场景，点击按钮才加载某个js.

CSS Tree Shaking

        npm i glob-all purify-css purifycss-webpack --save-dev

JS Tree Shaking

清除到代码中无用的js代码，只支持 import 方式引入，不支持 commonjs 的方式引入。

只要 mode 是 production 就会生效，develpoment 的 tree shaking 是不生效的，因为 webpack 为了方便你的调试。

optimization: { usedExports:true, }

图片处理

        cnpm i file-loader url-loader -D

Clean Plugin and Watch Mode

清空目录，文件有改动就重新打包

区分环境变量

开发模式与webpack-dev-server,proxy

DllPlugin 插件打包第三方类库

项目中引入了很多第三方库，这些库在很长的一段时间内，基本不会更新，打包的时候分开打包来提升打包速度，而 DllPlugin 动态链接库插件。

其原理就是把网页依赖的基础模块抽离出来打包到 dll 文件中，当需要导入的模块存在于某个 dll 中时，这个模块不再被打包，而是去 dll 中获取。

安装 jquery，并在入口文件引入。新建 webpack.dll.config.js 文件

在package.json中添加

        "build:dll": "webpack --config ./build/webpack.dll.config.js",

运行

        npm run build:dll

你会发现多了一个 dll 文件夹，里边有 dll.js 文件，这样我们就把我们的 jquery 这些已经单独打包了，接下来怎么使用呢？

需要再安装一个依赖

        npm i add-asset-html-webpack-plugin

合并提取 webpack 公共配置

开发环境与生产环境以及webpack配置文件的分离，具体需要用到webpack-merge，用来 合并 webpack配置。

到这里基本就结束了,觉得有帮助,不妨点个赞, 不足之处，还望斧正~