一、兼容性处理
browserslistrc
1. 如何实现兼容
browserslist 仅仅提供需要兼容的平台的版本限制，处理兼容性的插件则受限于这个版本限制，例如 Bable，postcss-preset-env 等插件。
2. 兼容那些平台
兼容平台可以通过 caniuse.com 进行查看，点击底部 Browser usage table 查看浏览器每个版本占有率。browserslist 由 Webpack 自动安装，可使用 npx?browserslist 查看，该模块就是引用 caniuse.com 统计出的占有率进行判断。配置方法：在 package.json 中新加 browserslist 属性，值为数组。也可以新建.browserslistrc文件。
postcss 的兼容处理使用
1. postcss做了什么
postcss 其实就是给css代码添加前缀，使css代码兼容各个平台，postcss用postcss-loader 的方式 添加在rules中的.css的解析中。postcss 本身不会给 css 添加前缀，还需使用配套的插件去完成，例如 autoprefixer （添加前缀的插件），postcss-preset-env（postcss所有插件的集合，包括autoprefixer）
1. postcss怎么用
安装 postcss-loader ，安装 postcss-preset-env 集合，写在 css-loader 的前面，按照使用格式，引用 postcss-preset-env 插件即可。
二、asset 处理图片
1. asset 做了什么
asset 为 Webpack5 自带图片处理器，可以代替 file-loader ，url-loader ，row-loader 进行图片的处理，具体关系为：
/**
asset/resource ---> file-loader ( 将图片拷贝到新路径 )
asset/inline ---> url-loader ( 将图片转为 base64 )
asset/source ---> raw-loader ( 将文件转换为字符串导入 )
asset ( 可以进行多元化配置 )
*/
三、Webpack 插件
plugins
1. 插件如何帮助我们
在 Webpack 打包的过程中，我们可以在 loader 执行的过程中使用 plugin 做一些操作来达到我们的目的，比如在 style-loader 之前使用 pluigin 对 css 进行压缩，使添加到页面上的代码为压缩后的代码。
html-webpack-plugin
本插件自动创建一个html文件作为网站的入口html文件，并且可以配置其中属性，还可以引用一个html模板。
copy-webpack-plugin
对于不需要打包的文件可以直接通过本插件拷贝到打包目录，减少打包时间，比如favicon.ico文件
四、babel?
babel 的使用
在我们工作的时候，有时候需要写 JSX 语法，TS 语法，ES6+ 语法等浏览器平台不能直接使用的语法，并且接受 browserslist 的兼容性设置
babel-loader 的使用
babel 的使用类似 postcss ，它不会直接转化代码，而是需要使用插件来转化代码，所以使用预设来使用最方便，@babe/preset-env，而且建议使用 babel.config.js 的方式。
babel polyfill 配置
1. 为什么使用 polyfill
babel-preset-env 不能为一部分方法打补丁，?在 Webpack5 之前的版本打包会转化 Promise 之类的函数，但是 Webpack5 为了按需加载，不会自动加补丁，所以需要手动配置。
1. 如何使用 polyfill
其实可以直接使用 @babel/polyfill ，但是这个包太大，所以官网建议使用 core-js，regenerator-runtime。
五、resolve?
resolve 的使用
1. Webpack 的路径解析规则
引用路径可以分为相对路径，模块名称，和绝对路径，resolve 处理了路径，但是没有判断引用的文件。当 import 一个文件的时候没有添加文件后缀，则会按照 resolve.extensions 的默认值加上后缀再寻找，找不到就报错。当 import 的路径以 “/” 结尾的时候，会认为引用的是路径，则会按照resolve.mainFiles 的默认配置，在路径后面添加文件名，比如默认值是 index，根据上一步给 index 添加默认后缀。当然如果 import 的是一个模块，则引用 resolve.modules 的默认值。
1. 自定义 resolve
在配置文件新加 resolve 属性，常用 extension 配置引用默认后缀，alias 对引用文件目录进行简化
五、source-map?
mode 的相关性
mode 选项配置告知 Webpack 使用相应模式的内置优化，比如在没有配置 devtool 的时候自动使用 devtool : 'eval' 的配置，导致打包后代码的格式是 eval 的格式。
source-map 的使用
1. source-map 是什么
在运行在浏览器端的代码报错的时候，在控制台查看报错信息是直接进入打包后的文件，不能直观的看到报错的代码。而 source-map 可以通过映射的方式在控制台看到源代码。
1. 设置 source-map?
使用 devtool 属性为 ' source-map?'，就可以启动，而且有多种配置。
六、代码的拆分?
entry 的配置
可以在 entry 中配置多个入口，然后在 output 中动态配置，最后实现按入口问价的拆分，不过这种方式不建议使用。
splitChunks?的配置
1. 基本配置说明
在配置中，常用的是 minSize ，maxSize，minChunks，其中前两个配置优先级高于第三个，所以就是说设置了前两个配置后，第三个配置不生效。
1. cacheGroups 配置说明
此配置可以在拆包的时候进行分组，在拆包过程中，面对一个文件引用多个包，会把之前拆出来的包放在缓存内，等所有包拆完以后，一块打包。
2. cacheGroups 使用
可以单独对执行文件夹内的文件打包，而且可以对单独的打包文件设置打包名称，打包规则之类的
import 动态导入配置
在 output 中设置 chunkFilename 属性，可以定义动态导入 chunks 的名字，而且可以通过魔法注释的方式，在引用时自定义[name]的名称，例如 import(/*webpackChunkName:'name'*/'./src/main.js')
runtimeChunk?配置
在打包后的文件中，会在 bundle.js 中有一块代码，是对引用的代码路径进行解析和加载的，如果不单独配置 runtimeChunk，那么每次打包都会重新生成新的 hash 文件名，但是设置runtimeChunk 以后，会把解析文件单独提出来，其中修改的文件会改变问价名，而没有修改的文件则会保留之前的文件名，方便浏览器缓存。
prefetch 与 preload
功能类似路由懒加载，其实就是通过魔法注释来区分哪些文件不需要再首屏加载的时候进行加载，然后在空闲的时候自动加载
|