最近，自己在做的项目要搞一波大改版，鉴于webpack5有下图中的这么多好处，不如趁机附带下搞升级
说整就整
升级webpack到最新稳定版本，目前来看是
升级过程中遇到的错误
- configuration.module.rules should be one of these...
这是因为webpack5不再支持loaders的选项，如果config.module.rules里配置了loaders，改成使用use
- TypeError: webpack.optimize.OccurrenceOrderPlugin is not a constructor
这个是因为我们的项目里使用了webpack.optimize.OccurrenceOrderPlugin，将其注释掉即可
看webpack5的源码,
没有这个plugin了
- TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible
这个是需要升级html-webpack-plugin,可以查看这个issue: github.com/dzintars/fr…
那么为什么会出现这个问题呢？
看webpack源码：
webpack的compolation对象使用Object.freeze包裹了一下hooks对象，包裹之后就无法再扩展了。html-webpack-plugin升级之后，关于这部分的实现方式修改了，想知道的可以看源码，这里就不延伸了~
- 使用webpack-dev-server 启动server时，报错 Error: Cannot find module 'webpack-cli/bin/config-yargs'
这是因为在webpack-cli 4.x中，不能过webpack-dev-server启动项目了，需要通过webpack serve...或者修改webpack-cli版本改为3.x
升级过程中遇到的警告
- [DEP_WEBPACK_MODULE_ERRORS] DeprecationWarning: Module.errors was removed (use getErrors instead)
使用官方推荐node --trace-deprecation先定位到是哪个库的问题
我这里的是
需要升级下ts-loader
- (node:6284) [DEP_WEBPACK_STATS_WARNINGS_FILTER] DeprecationWarning: config.stats.warningsFilter is deprecated in favor of config.ignoreWarnings
这个是因为我的项目中使用了stats: {warningsFilter: ['node_module']},将其替换成config.ignoreWarnings
升级前后打包速度和体积对比
升级前
打包速度
打包体积
升级后
打包速度
打包体积
从打包速度和体积可以看出来，webpack5拥有更快的打包速度及更小的打包体积
结语
希望这份不完全踩坑指南，能对你升级webpack5有所帮助
