Wepack的高级配置，是的代码在编译/运行时性能更好

提升开发体检

SourceMap

为什么？ 开发时我们运行的代码是经过webpack编译之后的（），所有的css和js合并成了一个文件，并且多了很多其他代码，此时如果代码出错那么提示代码出错的位置，我们可能会看不懂，一旦代码量很大，那么我们很难发现错误出现在哪里，所以我们需要更加准确的错误提示，来帮助我们更好的开发代码

是什么 SourceMap是一个用来生成源代码与构建后代码---映射的文件的方案。他会生成一个xxx.map文件，里面包含源代码和构建后代码每一行，每一列的映射关系。当构建后代码出错了，会通过xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找出错误根源

怎么用 Dev Tool中可以看出，SourceMap有很多种情况，但是实际开发时，我们只需要关注两种情况即可：

开发模式：cheap-module-source-map
- 优点：打包编译速度快，只包含行映射
- 缺点：没有列映射（不过开发代码是有列的，但是生产模式输出后只有一行，所以要关心列）
生产模式：source-map
- 优点：包含行/列映射
- 缺点：打包编译速度更慢

提升打包构建速度

HotModuleReplacement

为什么 开发时我们修改了其中一个模块代码，Webpack默认会将所有模块全部重新打包编译，速度很慢，所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包的速度就会很快 是什么 HotModuleReplacement(HMR/热模块替换)：在程序运行中，替换、添加或者删除模块，而无需重新加载整个页面 怎么用 1.基本配置

OneOf（开发生产模式都可以使用）

为什么 打包的时候每一个文件都会经过所有的laoder处理，会自上而下的找，虽然因为test正则原因实际并没有处理上，但是都要经过一遍，所以会比较慢 是什么 顾名思义就是只能匹配上一个loader，剩下的就不匹配了 怎么用 1.基本配置

Include/Exclude

为什么 开发的时候我们需要使用第三方库或者插件，所有的文件都下载到node_modules中了，而这些文件是不需要编译就可以直接使用的，所以我们在对js文件处理的时候，就要排出node_modules下面的文件

是什么 include: 包含，只处理xxx文件。 exclude：排除，除了xxx文件之外其他都处理 怎么用 一般样式文件不需要处理，主要开发的时候我们基本不会引入第三方开发的一些样式的，主要自己写样式，如果我们引入了比如bootstrap.css的样式，我们也希望他能以我们的方式运行，所以我们也需要进行处理，所以主要针对js文件处理，也就是babel和eslint

Cache

为什么 每次打包的时候js文件都要经过eslint和babel编译，速度比较慢，我们可以缓存之前的eslint和babel编译结果，这样第二次打包的时候就会更快 是什么 对eslint检查和babel编译结果进行缓存

Thead

为什么 当项目越来越庞大的时候，打包的速度越来越慢，甚至于要好几个小时才能打包出来代码，如果我们想要提升打包速度，主要就是要提升js的打包速度，因为其他的文件比较少，而对js文件处理主要就是eslint，babel，terser（内部用的，只要开启了production模式，webpack内部就会启动terser来压缩代码）三个工具，我们需要提高他们的运行速度，我们可以开启多进程同时处理js文件，这样速度就比之前的单进程打包更快 是什么 多进程打包：开启电脑的多个进程同时打包，速度更快，需要注意，请仅在特别耗时的操作中使用，因为每一个进程启动就大约为600ms左右的开销

怎么用 先判断cpu的核数我们启动进程的数量就是我们CPU的核数，每个插件可能写的方式不一样，可以查阅对应插件的文档

减少代码体积

Tree Shaking

为什么 开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库，如果没有特殊处理的话我们打包的时候会引入整个库，但是实际上可能我们可能只能用上极小部分的功能，这样整个库都打包进来，体积就太大了

是什么 Tree Shaking是一个术语，通常用于描述移除JavaScript中的没有使用上的代码，注意：它依赖 ES Module 怎么用 Webpack已经默认开启了这个功能，无需其他配置

Babel

为什么 Babel为编译的每一个文件都插入了辅助代码，使代码体积过大！Babel对一些公共方法使用了非常小的辅助代码，比如_extend.默认情况下会被添加到每一个需要他的文件中，我们可以将这些辅助代码作为独立模块，来避免重复引入

是什么 @babel/plugin-transform-runtime:仅用了Babel自动对每个文件的runtime注入，而是引入@babel/plugin-transform-runtime并且使用所有辅助代码从这里引用

怎么用 npm i @babel/plugin-transform-runtime -D

Image Minimizer

为什么 如果开发项目中引入了较多的图片，那么图片体积就会比较大，将来请求速度比较慢，我们可以对图片进行压缩，减少图片体积。注意：如果项目中图片都是在线链接，那么就不需要了，只有本地静态项目才需要进行压缩

是什么 image-minimizer-webpack-plugin：用来压缩图片的插件

怎么用 npm i image-minimizer-webpack-plugin imagemin -D还需要下载剩下的几种，一种是有损压缩 npm i imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D，另外一种有损压缩 npm i imagemin-gifscle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

webpack.js.org/plugins/ima...