• webpack.prod.js

• 3. 控制兼容性
  我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

  {// 其他省略"browserslist": ["ie >= 8"]
  }

  
  想要知道更多的 browserslist 配置，查看browserslist 文档

  以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

  实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

  {// 其他省略"browserslist": ["last 2 version", "> 1%", "not dead"]
  }

  
  4. 合并配置
  webpack.prod.js

3、css压缩

 【尚硅谷webpack5笔记base部分-CSDN博客】中Css 压缩部分

4、sourceMap提高开发效率

[尚硅谷webpack5笔记2-CSDN博客]SourceMap

是什么
SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。

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

怎么用
通过查看Webpack DevTool 文档可知，SourceMap 的值有很多种情况.

但实际开发时我们只需要关注两种情况即可：

开发模式：cheap-module-source-map

优点：打包编译速度快，只包含行映射
缺点：没有列映射

5、打包构建速度HotModuleReplacement

[尚硅谷webpack5笔记2-CSDN博客]提升打包构建速度

6、oneOf

[尚硅谷webpack5笔记2-CSDN博客]OneOf

为什么

打包时每个文件都会经过所有 loader 处理，虽然因为 test 正则原因实际没有处理上，但是都要过一遍。比较慢。

顾名思义就是只能匹配上一个 loader, 剩下的就不匹配了。

7、include和exclude

[尚硅谷webpack5笔记2-CSDN博客]Include/Exclude

为什么
开发时我们需要使用第三方的库或插件，所有文件都下载到 node_modules 中了。而这些文件是不需要编译可以直接使用的。

所以我们在对 js 文件处理时，要排除 node_modules 下面的文件。

是什么
include
包含，只处理 xxx 文件

exclude
排除，除了 xxx 文件以外其他文件都处理

8、cache

[尚硅谷webpack5笔记2-CSDN博客]cache

为什么

每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢。

我们可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时速度就会更快了。

对 Eslint 检查 和 Babel 编译结果进行缓存。

9、Thead

[尚硅谷webpack5笔记2-CSDN博客]Thead

为什么
当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码。这个速度是比较慢的。

我们想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。

而对 js 文件处理主要就是 eslint 、babel、Terser 三个工具，所以我们要提升它们的运行速度。

我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了。

是什么
多进程打包：开启电脑的多个进程同时干一件事，速度更快。

需要注意：请仅在特别耗时的操作中使用，因为每个进程启动就有大约为 600ms 左右开销。

怎么用
我们启动进程的数量就是我们 CPU 的核数。

10、减少代码体积

[尚硅谷webpack5笔记2-CSDN博客]减少代码体积

Tree Shaking

为什么
开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。

如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。

这样将整个库都打包进来，体积就太大了。

是什么
Tree Shaking 是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。

注意：它依赖 ES Module。

怎么用
Webpack 已经默认开启了这个功能，无需其他配置。

Babel

为什么
Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！

Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。

你可以将这些辅助代码作为一个独立模块，来避免重复引入。

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