assets module ​

assets module 可以处理图片、字体等资源，不需要使用 url-loader 和 file-loader

一般配置 type:asset，在 10kb 以下时会切换成 type:asset/inline

type:asset/resource 意思是将资源拷贝到输出目录；type:asset/inline 意思是将资源转换为 base64 编码

兼容性 ​

配置 babel-loader

配置 postcss-loader 和 配置 browserslist

代码压缩 ​

css 压缩：配置 css-minimizer-webpack-plugin

html 和 js 压缩： 生产模式默认压缩

图片压缩：image-webpack-loader，配置 quality: 80，压缩图片质量

提升开发体验 ​

sourcemap ​

开发模式使用 eval-cheap-source-map，只生成行映射，不生成列映射

生产模式使用 source-map，生成行映射和列映射，打包速度更慢

提升打包构建速度 ​

HMR ​

配置 devServer.hot 为 true，开启 HMR，React 默认不会刷新，会使用 React Refresh 插件

OneOf ​

匹配上一个 loader 就不匹配了

Include/Exclude ​

主要是处理 JS 的时候，比如 babel-loader 里可以排除 node_modules（默认） 目录，只包括 src 目录

Cache ​

因为打包 JS 比例比较大，所以 ESlint 检查 和 Babel 编译的缓存非常重要，cacheDirectory 开启缓存

webpack 5 可以开启 cache.type: 'filesystem' 缓存，可以自定义缓存目录，缓存时间，缓存策略等

Thread ​

thread-loader 多进程打包，比如 babel-loader 里可以开启多进程打包

terser-webpack-plugin Webpack5 自带有，但是可以自定义配置 thread-loader 的线程数来多线程压缩

减小代码体积 ​

Tree Shaking 摇树优化，删除没有用到的代码，Webpack5 默认开启

babel ​

@babel/plugin-transform-runtime 禁用 regeneratorRuntime 的自动引入，使用 @babel/runtime 替代，避免重复引入

优化代码运行性能 ​

参考 ​

• 尚硅谷 Webpack5 入门到原理
• 催学社 mini-webpack
• 掘金小册 Webpack5 核心原理与应用实践

微前端 ModuleFederationPlugin ​

Webpack 实现微前端，使用 ModuleFederationPlugin 插件，导出方需要使用插件的 exposes 声明导出哪些模块，使用 filename 声明入口文件；导入方需要使用插件的 remotes 声明远程模块地址，之前使用异步导入语法 import("module") 导入