webpack5升级总结：在weppack5.1x升5.7x所遇到的问题汇总
Author：zhoulujun Date：
webpack3升4,4升5，中间都有很多坑，不能直接无缝升级。
4升5，可以官网：To v5 from v4——https://webpack.docschina.org/migrate/5/，官网上：
升级 webpack 4 至最新的可用版本。
当使用 webpack >= 4 时，升级到最新的 webpack 5 版本无需额外的操作。
如果你使用的 webpack 版本小于 4，请查阅 webpack 4 迁移指南
但是事实上不是这样的，本篇在weppack5.1x升5.7x所遇到的问题。一些是webpack本身的问题，还有就是周边插件的升级的。
webpack-dev-server
https://www.npmjs.com/package/webpack-dev-server
webpack-dev-server3.x升级到 webpack-dev-server4.9.x
官网3升4教程：https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md
主要注意事项：
quiet：移除，官方迁移文章建议可以在infrastructrueLogging中修改，这部分其实没看明白，目前直接把infrastructrueLogging.level设置为info，显示错误告警与信息，但是又用了friendly-errors-webpack-plugin，导致错误告警显示2次，直接用none的话又没有基础设施日志，求解答！
overlay：移至client中
clientLogLevel：移至client中，更改为logging属性
disableHostCheck：更改为allowedHosts，可以自行增加白名单
修改后配置对比：
webpack-dev-server的源码以及的里面的案例，还是的再看看：https://github.com/webpack/webpack-dev-server
webpack-dev-server4.x 支持https、http2、热更新配置起来非常方便。在隔壁的非常香
关于热模块替换：模块热替换 https://webpack.docschina.org/guides/hot-module-replacement/
MiniCssExtractPlugin
https://webpack.js.org/plugins/mini-css-extract-plugin/
https://www.npmjs.com/package/mini-css-extract-plugin
https://github.com/webpack-contrib/mini-css-extract-plugin
配置参数变化
https://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/#minimizeroptions
在wepback4之前会配置 cache: true，现在这个配置没有了，ts会报错。具体参看如下：
| 选项名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| test | String|RegExp|Array<String|RegExp> | /\.css(\?.*)?$/i | 匹配要处理的文件 |
| include | String|RegExp|Array<String|RegExp> | undefined | 要引入的文件 |
| exclude | String|RegExp|Array<String|RegExp> | undefined | 要排除的文件 |
| parallel | Boolean|Number | true | 启用/禁用多进程并行处理。 |
| minify | Function|Array<Function> | CssMinimizerPlugin.cssnanoMinify | 允许覆盖默认的 minify 函数。 |
| minimizerOptions | Object|Array<Object> | { preset: 'default' } | Cssnano 优化 配置项。 |
| warningsFilter | Function<(warning, file, source) -> Boolean> | () => true | 允许过滤掉 css-minimizer 的警告。 |
terser-webpack-plugin
同样也没有cache配置了
webpack4的时候可以通过terser-webpack-plugin的cache属性开启文件缓存。现在webpack5自身提供了持久化缓存机制，它能够将首次打包的结果缓存到硬盘中，等下次打包的时候就可以跳过一系类的耗时的操作，复用第一次的打包结果。可以通过以下配置开启持久化缓存：
cache: {
type: 'filesystem',
version: 'yourVersion'
}具体查看官网：https://webpack.js.org/plugins/terser-webpack-plugin/
参考文章：
webpack5升级&优化指南，webpack5真香！ https://juejin.cn/post/7020692335696707620
webpack4升级webpack5各种坑 https://juejin.cn/post/6993158945833484296
webpack4升级到webpack5经验总结 https://juejin.cn/post/7101953772116508686
转载本站文章《webpack5升级总结：在weppack5.1x升5.7x所遇到的问题汇总》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpack/2022_0530_8823.html