前言

本文将记录一次webpack4（后面称w4）升级为webpack5（后面称w5）的全流程。一方面是作为知识的记录，也希望可以给看到的人提供一点点帮助。这次的升级主要是听闻w5的整体构建速度有大幅度的上升。在这个大家都在追求效率的时代，同时用不了听说更快的vite，决定尝试升级w5.同时万一很快迭代到w6，再从w4升级到w6，这种隔代的升级会导致更多的问题。

正文

第一步 webpack-cli和webpack-dev-server升级

这次的升级可以算是对所有包的一次全方位的升级。如果单独只升级webpack-cli和webpack-dev-server可能出出行部分plugin和loader不兼容的问题，所以这里是建议对所有包进行一次升级。 这里建议使用npm-check-updates来进行一次性全方位的升级。即省事也减少犯错的可能。依次执行

npm install -g npm-check-updates

npm-check-updates 此句为检查需要更新的包

ncu -u 修改package.json文件

npm install 重新安装

至此w5包升级部份基本完成，然而这可能只是万里长征的第一步。真正的难题是npm run start之后出现的一堆报错。后面将开始webpack.config.js配置文件的修改。

第二步 package.json中script指令修改

首先webpack-dev-server打包指令的更改。新的webpack-dev-server启动和传入全局变量的写法需要变更。 原写法

"start": "webpack-dev-server --env.NODE_ENV=stage --env.MODE=dev --config ./webpack.config.js",//原指令

更新后的写法。这个全局变量的写法更改有一说一我一开始还不知道，也没看到有人说过。陆陆续续尝试了set的写法，加入cross-env插件都无效

"start": "webpack serve --env NODE_ENV=stage MODE=dev --config ./webpack.config.js",

到这里可以开始执行npm run start了

第三步 webpack.config.js具体遇到问题

问题一 webpack.NamedModulesPlugin is not a constructor 这个是因为w5已经内置了部分插件，只需要升级废弃的配置项就可以，这里我只用到了这一个需要升级的。

这里贴上w5需要升级的所有配置项。根据具体项目进行升级即可。继续下一个问题 optimization.hashedModuleIds: true → optimization.moduleIds: 'deterministic' optimization.namedChunks: true → optimization.chunkIds: 'named' optimization.namedModules: true → optimization.moduleIds: 'named' NamedModulesPlugin → optimization.moduleIds: 'named' NamedChunksPlugin → optimization.chunkIds: 'named' HashedModuleIdsPlugin → optimization.moduleIds: 'deterministic' optimization.noEmitOnErrors: false → optimization.emitOnErrors: true optimization.occurrenceOrder: true → optimization: { chunkIds: 'total-size', moduleIds: 'size' } optimization.splitChunks.cacheGroups.vendors → optimization.splitChunks.cacheGroups.defaultVendors Compilation.entries → Compilation.entryDependencies serve → serve 已被移除，推荐使用 DevServer Rule.query (从 v3 开始被移除) → Rule.options/UseEntry.options

问题二 Invalid options object. Terser Plugin has been initialized using an options object that does not match...options has an unknown property 'cache'. 这个问题是因为terser这个插件的cache缓存配置已默认开启，这个字段已不在配置字段中。所以注释掉即可。

问题三 TypeError: merge is not a function 这个问题是因为webpack-merge的引入方式发生了改变。解决方法如下

问题四 configuration.stats has an unknown property 'maxModules'. These properties are valid 这个问题是因为maxModules该配置已被取消。把该配置注释掉即可 configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". 这个则是因为source-map配置的写法发生了修改。可以根据官方文档进行对应的修改。 附上官方地址webpack.docschina.org/configurati…

问题五 webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. 这个问题是因为w5把内置的polyfill取消掉了，需要自行进行配置。如我这里用到crypto-browserify该包进行加密。只需要通过npm单独安装这个包。再进行如下配置。

问题六 Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'javascriptEnabled'. 这个问题是因为lessloader中的javascriptEnabled和modifyVars字段配置方式发生变化。解决方法如下

问题七 升级w5后发现部分静态图片加载失败。原因是url-loader最新版本默认情况下会把require引入的内容当做esModules去处理,而不是解析内容本身，所以要关闭默认解析方式。解决方法如下：

至此该项目开发构建部分已基本跑通。后面会继续对打包功能的配置进行修改。

问题八 UnhandledPromiseRejectionWarning: TypeError: this.options.cssProcessor.process is not a function 这个问题是原因是OptimizeCssAssetsWebpackPlugin该插件放弃了w5的升级。具体情况可以在npm网站上搜索该插件

解决方法如下（记得在文件开头引入CssMINImizerPlugin），具体其他配置可在webpack官网查看：

至此打包功能也顺利完成了

问题九 打包速度翻倍了？ 当天升级完成之后有一个很神奇的现象，构建的速度明显快了，但是打包速度竟然从原来28s变成了42s。这个现象当时弄的我真的很懵，以为自己哪里没配置好，一开始以为是代码压缩那一块的问题。之后发现代码压缩程度还不如以前。这个问题整整弄了我一下午也没有解决。问题的解决出现在第二天，我的电脑重启之后打包时间变成了6.9s，也就是最后一张图。果然还是那句老话，没有什么问题是重启解决不了的。

升级前构建速度 `打包速度

体积为9.6M

升级后构建速度

体积9.7M

重启后的打包时间

体积9.3M

总结

可以看到，升级了w5之后速度有了明显的提升，打包之后的体积也发生了改变。具体为什么速度提升了，看看后面有没有机会继续研究吧。

最后说一下收获吧。说真的，以前webpack的教程文章看过很多，但是基本没机会动手，一方面是教程的那些没多少实际意义，接手的项目也已经是配置好的，不需要修改配置。而这次的升级有一种从头学习重新配置一次的感觉，确实能学到很多东西。各位感觉不是很熟悉webpack的同学有机会一定要去试一下。 最后的最后是一点小建议。毕竟每一个工程webpack的配置都是不一样的，网上不会有完美适合你的教程。这里和大家说一下我遇到问题处理的流程。

首先就是看到一堆红色的报错不要慌，不要认为这是一堆问题，有可能只是其中一个问题导致一堆报错而已。就像本文中配置lessloader那个问题，真的就是一长串问题，但是重新配置好就都消失了。 之后不一定需要完全看懂报错内容，找到其中的关键字，在网上找一下，不一定能找到。找到最好，找不到就在webpack官网搜索，基本就可以找到方案了。这个才可能是这次升级最大的收获