「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」

本篇文章不只是搭建webpack5的项目，还有个更重要的目的是，为了在搭建过程中了解每个插件，loader的作用，为什么要使用这些东西，这些东西带来了什么。

我为本项目写了一个cli工具：fight-react-cli，想直接看最终结果的同学，安装一下这个cli工具，初始化一个项目就能查看全部的配置。

首先我们创建一个项目webpack-demo，然后初始化npm，然后在本地安装webpack和webpack-cli：

安装的webpack包则是webpack的核心功能包，webpack-cli则是webpack的命令行工具，可以在终端中使用webpack命令启动项目和打包项目。

然后我们在项目的根目录下创建一个文件夹webpack，在这个文件夹中创建三个文件用以区分环境：

然后在根目录创建src文件夹，在src文件夹下面创建index.js：

我们在webpack文件夹下的webpack.common.js中来写基本的配置：

这里我们导出了一个函数，函数中返回了webpack的配置信息。当这个函数被调用时，会传入当前运行的环境标识webpackEnv，它的值是development或者production，并将webpackEnv赋值给了mode，用于根据不同模式开启相应的内置优化，还有个作用则是根据不同环境自定义开启不同的配置，在后续配置中会用到。

在配置信息中是webpack的5大基本模块：

基本配置完成了，我们现在想要让代码运行起来，并且当代码修改后可以自动刷新页面。

首先先安装webpack-dev-server：

安装完成后，我们进入webpack.dev.js中来添加开发时的配置：

在这里我们首先引入了webpack.common.js，上面我们介绍了这个文件导出一个函数，接收环境标识作为参数，这里我们传入的是development，然后将返回的配置对象webpackCommonConfig，与开发时的配置进行了合并。

html-webpack-plugin的作用是生成一个html文件，并且会将webpack构建好的文件自动引用。

安装完成后，在webpack.common.js中添加该插件：

html-webpack-plugin还可以添加一个模板文件，让html-webpack-plugin根据模板文件生成html文件。

我们在根目录下创建一个public文件夹，在文件夹下创建一个index.ejs:

然后在插件中引入模板：

注意：：这里我引用.html后缀的模板，html-webpack-plugin始终无法正常的生成html，然后改为了.ejs后就正常了。

然后我们在package.js中来配置启动和打包的命令：

我们在scripts中添加了build和start命令，build用于打包发布，start用以开发时启动项目。

然后我们命令行中进入到项目的更目录下，运行：npm start 或者 yarn start命令来启动项目。

我们知道webpack本身只支持处理js和json类型的文件，如果我们想处理其它类型的文件，则需要使用相应的loader。

提前列出需要使用到的loader：

安装：

对于css文件，则需要添加：css-loader：

webpack.common.js

index.js

index.css

此时我们运行发现文字并没有添加颜色，这是为什么？

因为css-loader只负责解析css文件，解析完成后会返回一个包含了css样式的js对象：

我们需要css样式生效，则需要将css样式插入到dom中，那么又需要安装自动插入样式的loader：style-loader。

webpack.common.js

这里需要注意，loader的执行顺序是倒序执行（从右向左或者说从下向上），我们需要先使用css-loader解析css生成js对象后，将css对象交给style-loader，style-loader会创建style标签，将css样式抽取出来放在style标签中，然后插入到head中。

在不同浏览器上css的支持是不一样的，所以我们需要使用postcss-loader来做css的兼容： webpack.common.js

在postcss中使用了postcss-preset-env插件来自动添加前缀。

在webpack5之前我们使用url-loader来加载图片，在webpack5中我们使用内置的Asset Modules来加载图像资源。

在 webpack 5 之前，通常使用：

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

webpack.common.js

添加generator属性自定义文件名与文件存放位置。

也可以在output中定义assetModuleFilename设置默认存放位置与文件名格式：

webpack.common.js

我们通过排除其他资源的后缀名来加载其他资源。

需要使用到的loader：

安装：

需要用到的babel插件：

安装：

webpack.common.js

这里我们会使用babel的插件：@babel/preset-env，它是转译插件的集合。

比如说我们使用了箭头函数，浏览器是不识别的需要转译成普通函数，那么我们就需要添加babel插件：@babel/plugin-transform-arrow-functions来处理箭头函数，如果我们使用了很多es6的api，都需要手动添加插件，这样会非常麻烦，babel为了简便开发者的使用，将所有需要转换的es6特性的插件都集合到了@babel/preset-env中。

在使用@babel/preset-env我们需要配置corejs属性，什么是corejs？

babel只支持最新语法的转换，比如：extends，但是它没办法支持最新的Api，比如：Map，Set，Promise等，需要在不兼容的环境中也支持最新的Api那么则需要通过Polyfill的方式在目标环境中添加缺失的Api，这时我们就需要引入core-js来实现polyfill。

useBuiltIns则是告诉babel怎么引入polyfill。

当选择entry时，babel不会引入polyfill，需要我们手动全量引入：

当选择usage时，babel会根据当前的代码自动引入需要的polyfill：

但是我们发现这样使用polyfill，会污染全局对象，如下：

如果我们使用了其它插件也在原型对象上添加了同名方法的，那就会导致出现问题。

这时我们则可以使用@babel/plugin-transform-runtime插件，通过引入模块的方式来实现polyfill：

我们来看下效果：

转译后：

可以看到转译后includes的实现是通过调用了runtime—corejs3中的includes方法。

通过上面我们知道了@babel/plugin-transform-runtime的作用，我们再来看看它常用的配置属性。

helpers，我们将helpers先设置为false来看看编译后的效果。

转译后：

我们看到在转译后，在顶部添加了一个_classCallCheck工具函数，如果打包后有多个文件，每个文件中都是用了class，那么在顶部都会生成同样的_classCallCheck工具函数，这会使我们最后打包出来的文件体积变大。

我们将helpers设置为true，再来看转译后的效果：

我们看到_classCallCheck函数通过模块的方式被引入，这样就使babel通用的工具函数能够被复用，从而减小文件打包后的体积。

corejs：指定依赖corejs的版本进行polyfill。

regenerator：在我们使用generate时，会在全局环境上注入generate的实现函数，这样会造成全局污染，将regenerator设置true，通过模块引入的方式来调用generate，避免全局污染：

regenerator设置为false时：

可以看到regeneratorRuntime这个对象是直接使用的，并没有引入，那么它肯定就是存在于全局环境上。

regenerator设置为true时：

可以看到，这次使用的generate函数是从runtime-corejs3中导出引用的。

注意：还需要在package.json中配置目标浏览器，告诉babel我们要为哪些浏览器进行polyfill：

完成了webpack的基本配置后，我们再来配置一些更高级的。

什么是css modules？

我是这么理解的：每个css文件都有自己的作用域，css文件中的属性在该作用域下都是唯一的。

在我们有多个组件时，每个组件都有相对应的css文件，其中的属性名称难免会有重名的，我们直接使用的话，后者则会覆盖前者，只会有一个样式生效。我们通过css modules对属性名通过hash值或者路径字符串的形式进行重命名，保证每个属性名都是唯一的，只会作用在本身的组件上，而不会影响到其它组件。

直接在css-loader中添加modules属性：

sass是一款强化css的辅助工具，它在css基础上增加了变量，嵌套，混合，导入等功能，能够使我们更好的管理样式文件，更高效的开发项目。

安装：

在webpack中需要添加sass-loader，来对sass文件进行处理，将sass文件转化为css文件。

我们在写react代码的时候，使用了jsx语法，但是浏览器并不认识jsx语法，我们需要先对jsx语法进行转换为浏览器认识的语法React.createElement(...)。

需要的babel插件：

安装：

使用：

在以前旧版本中，我们在使用jsx语法时，必须要引入：

在最新的版本中，我们将runtime设置为automatic，就可以省略这一步，babel会自动为我们导入jsx的转换函数。

浏览器是不支持ts的语法的，我们需要先将ts文件进行编译，转换为js后浏览器才能够识别。

安装：

使用：

还需要在项目根目录下添加tsconfig.json:

具体配置可以查看ts官网。

多人开发时，我们希望每个人写的代码风格都是统一的，那么则需要ESLint来帮助我们实现。

安装：

这里我们选用的是 eslint-config-airbnb 配置，它对 JSX、Hooks、TypeScript 及 A11y 无障碍化都有良好的支持，可能也是目前最流行、最严格的 ESLint 校验之一。

接下来，创建 ESLint 配置文件 .eslintrc.js：

到这里eslin配置完成，但是需要我们每次都运行命令去检查和修复代码的问题，这样比较麻烦，所以我们使用webpack的插件：eslint-webpack-plugin来自动查找和修复代码中的问题：

在打包的过程中我们发现，代码中提示ts的错误依然能打包成功，这不是我们期望的结果。我们期望的是当ts在代码中显示错误，那么打包时也应该报错。

安装：

使用：

在引入文件的时候会这样写:

我们可以在webpack中配置扩展名，之后再引入文件则可以省略文件的后缀名：

当我们在引入一些文件时，它的路径比较长，写起来非常麻烦，而且不易阅读， 比如：

我们则可以在webpack中配置别名，来达到缩短文件路径的目的：

之后我们就可以这样引入文件：

我们优化可以分为两个方面，一个是开发是的优化，一个是打包时的优化。

在开发时，我们需要对代码进行调式和错误定位，希望能够准确的定位到源码的位置上，那么我们则需要配置sourcemap：

webpack.common.js

配置好后，当代码报错，浏览器中就会显示报错的代码的准确信息。

当我们启动项目时，每次都会重新构建所有的文件，但是有的文件是长期不变的，比如说在node_modules中的文件，并不需要每次都重新构建。

那么我们就讲这些长期不变的文件进行缓存：

webpack.common.js

在下一次启动的时候，webpack首先会去读取缓存中的文件，以此来提高构建的速度。

babel的缓存：babel的缓存特性也是和webpack是一样的，在构建时，首先回去读取缓存，以此提高构建的速度：

缓存的文件默认会在node_modules下的.cache文件夹下。

什么是HRM？简单说就是当有模块被修改了，那么则会立即刷新这个模块，但是其他的模块不会刷新。

a文件中引用了b文件，在没有开启HRM的情况下，我们修改了b文件，那么整个页面都会刷新。

在开启了HRM后，修改了b文件，b文件会马上刷新，但是a文件是不会刷新的。

使用：

webapck.common.js

在需要热更新的文件中添加以下代码：

但是在我们开发过程中不可能每个文件手动添加，而且在打包上线的时候是不需要热更新的代码的。

所以出现了一些自动添加热更新函数的插件：

对于React来说，已经不使用React Hot Loader这个loader，而是使用react-refresh.

安装：

使用：

在babel-load的plugins中添加react-refresh/babel，然后在webpack的plugins中添加@pmmmwh/react-refresh-webpack-plugin。有一点需要注意，热更新只在开发环境开启，如果在生产环境开启了，会将热更新的代码一起打包，但是它对于我们生产环境的代码来说没有任何作用。

对于css的热更新来说，在我们使用的style-loader的内部已经实现了HRM。

mini-css-extract-plugin插件会将js中的css提取到单独的css文件中，并且支持css和sourcemaps的按需加载。

安装：

使用：

通过环境区别，在开发环境使用style-loader，在生产环境使用mini-css-extract-plugin。

在开发过程中，同一个文件难免会被多个文件引用，在打包后，这个被引用的文件会重复存在于引用了它的文件当中，我们需要将它打包成独立的文件来达到复用的目的。

使用splitChunks：

通过配置optimization.runtimeChunk，将入口文件中运行时的代码提出来单独创建一个chunk，减小入口chunk的体积。

通常压缩js代码我们会使用terser-webpack-plugin，在webpack5中已经内置了该插件，当mode为production时会自动启用。

如果我们想自定义的话：

我们会使用css-minimizer-webpack-plugin插件。

它与optimize-css-assets-webpack-plugin 相比，在 source maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行。

安装：

使用：

这里注意一点，如果我们只想添加额外的插件与默认插件一起使用，需要添加'...'，表示添加默认插件。

使用DllPlugin将不会频繁更改的代码单独打包生成一个文件，可以提高打包时的构建速度。

使用： 首先我们新建一个webapck.dll.js文件，将会不频繁更改的包添加在入口：

然后我们在package.json处添加打包命令：

然后我们运行：npm run dll

最后会在项目根目录生成一个dll文件夹，其中会生成一个js文件，包含了我们需要单独打包的模块：react，react-dom，并且还需生成一个包含被打包模块信息的json文件。

然后我们还需要干两件事：

webpack.common.js

我们使用DllReferencePlugin来排除dll的模块：

我们需要将dll出来的json文件引入，json文件中包含了已经被打包的模块的信息，在webpack打包时就会排除这些模块。

然后我们使用add-asset-html-webpack-plugin来将dll出来的文件引入：

安装：

使用：

这里需要注意一点，在我引入js文件后，进行了打包运行，但是发现在运行时找不到vendor.dll.js，查看了路径发现多了一层：auto，需要设置publicPath为空字符串解决。

关于树摇，简单的理解的话就是再打包的时候将没有使用的js代码排除掉。

开启树摇：只需要将mode设置为production，tree shaking就会自动开启。

有些时候我们会开发一些插件，里面会有很多方法是提供给别人使用的，在插件内部是没有使用，在打包的时候就会被tree shaking掉。这时我们需要在package.js中声明一下sideEffects属性：

通过sideEffects告诉webpack在我声明的文件中是有副作用的，不要进行tree shaking。

清除未使用的css，可以理解为css的tree shaking，我们使用purgecss来实现。

因为我们经常会使用css模块，所以需要安装@fullhuman/postcss-purgecss

使用：

在postcss-loader添加该插件就可以了。

我们可以在工作比较繁重，花费时间比较久的操作中，使用thread-loader开启多线程构建，能够提高构建速度。

安装：

使用：

webpack 官网 提到 node-sass  中有个来自 Node.js 线程池的阻塞线程的 bug。 当使用  thread-loader  时，需要设置  workerParallelJobs: 2。

在webpack5之前我们使用clean-webpack-plugin来清除输出文件夹，在webpack5自带了清除功能。

使用：

在output中配置clean属性为true

懒加载也可以叫做按需加载，本质是将文件中的不会立即使用到的模块进行分离，当在使用到的时候才会去加载该模块，这样的做法会大大的减小入口文件的体积，让加载速度更快。

使用方式则是用import动态导入的方式实现懒加载。

使用：

当webpack打包时，就会将demo文件单独打包成一个文件，当被使用时才会去加载。

可以使用魔法注释去指定chunk的名称与文件的加载方式。

指定chunk名称：

指定加载方式：

我们来看下两种加载方式的区别：

打包完成后，可以将静态资源上传到CDN，通过CDN加速来提升资源的加载速度。

webpack.common.js

通过配置publicPath来设置cdn域名。

浏览器缓存，就是在第一次加载页面后，会加载相应的资源，在下一次进入页面时会从浏览器缓存中去读取资源，加载速度更快。

webpack能够根据文件的内容生成相应的hash值，当内容变化hash才会改变。

使用：

只在生产环境开启hash值，在开发环境会影响构建效率。

这里简单介绍一下：

注：以上都是webpack的plugin

处理css的loader：

处理js|ts的loader:

1.babel-loader: 处理js兼容，将es6转es5，对新Api进行polyfill。

presets - babel预置插件：

plugins - babel插件

处理资源文件：图片，字体文件等的loader

webpack5中使用内置的Asset Module：

不了解Tapable？那你咋写的Webpack插件

面试官：你写过webpack插件吗？

来吧！一起肝一个CLI工具