【前端学习记录】记一次升级webpack5的踩坑经历

关注

原创 2023-03-23 10:26:34 2.2k 阅读 AI 写同款· GEO 优化 ›

记一次字节跳动前端实习面试前言准备了一个星期。刚刚结束了我人生中第一次面试。本以为胜券在握，但最后以失败告终。虽然莫名奇妙的在hr评估环节被挂了，不过我觉得挂的不冤，还有好多值得自己反思和提升的地方。同时感谢二面的面试小哥，谢谢他的肯定与鼓励，让我重整旗鼓。这次面试也是对我的一次磨练，失败并不可怕，害怕失败才可怕！经过这次面试，我总结了下前端大厂对知识的深度和广度都有一定要求的，还有尤其是字节跳动对算法很重视，这一点无... 阅读详情

背景

最近在学习webpack5的使用和原理，学习的过程中，发现可以对项目上有很多优化，但是项目上使用的却是webpack4，而webpack5已经有好长时间了，再加上项目上不是很紧张，就新拉了一个分支，尝试将webpack4升级到webpack5。在这个过程中踩了很多坑，记录一下。

当前状态

项目上使用的webpack版本是4.x，虽然在package.json中没有体现出来，但是可以在node_modules里面可以看到。在node_modules里面，打开webpack文件夹，点击package.json，从_id上可以看到当前的版本。接下来开始升级过程。

开始升级

查看别人的升级过程

webpack4升级到webpack5经验总结这篇文章提供了升级的思路（还看了另一篇文章：极致编译速度，一文搞定webpack5升级），就是先装webpack5，然后将所有依赖的版本统一升级到最新，最后根据控制台报错来逐一击破。

安装webpack5

删除项目node_modules里的webpack文件，因为其版本是4.x，然后控制台输入

npm i webpack@latest

这样会在package.json里面增加一项webpack版本号的配置项。并在node_modules文件夹里生成新的webpack的包。

安装npm-check-updates

这个包是用来检查当前依赖的版本的，装好后，执行 ncu -u,可以自动将所有的依赖版本更新到最新，然后再 npm i 即可。关于ncu 的用法，可以查看关于npm 包更新工具npm-check-updates 使用详解这篇文章。

由于项目上使用的vue2，没有使用vue3，就是想只更新一下webpack的版本，于是在执行完 ncu -u之后，我把vue相关的版本号又退回了原来的版本号，只更新了一部分版本。更新完之后，开始 npm run build，于是报错之旅开始了。

Error：Cannot find module 'fs/promises

大部分关于这个报错的解决方案，都是类似这种的，cnpm报错：“Error：Cannot find module ‘fs/promises” 解决方案。说是node版本低，或是cnpm版本高，但是我没有用cnpm，所以按着装了下cnpm也不行。后来看到这篇文章，Cannot find module ‘fs/promises’ Electron JS ，上面提到有人升级node到14将问题解决了，我尝试升到node14，果然不再报错了。接下来继续开始ncu -u,可以正常使用。再次 npm run build ，继续报错。

Error: Cannot find module ‘webpack/lib/rules/DescriptionDataMatcherRulePlugin’

这个问题网上大多数的解决方案，都是说webpack的版本不匹配，webpack的版本太高了，重新降为webpack 4.x就好了，可是可是，我就是要升级的啊，是不可以打退堂鼓的。

Error: Cannot find module ‘webpack/lib/rules/DescriptionDataMatcherRulePlugin’ Require stack这篇文章中提到 可以尝试手动更新 vue-loader 包，于是 npm i vue-loader@15.9.8，之后问题解决。再次 npm run build ，继续报错。

Error: Rule can only have one resource source (provided resource and test + include + exclude) in { “exclude”: [ null ], …

这个问题，我以为是说webpack.config.js这个文件配置的有问题，但是经过一番探索和尝试之后，发现问题的原因是 @vue/cli 依赖 webpack@4，它自带的 webpack 配置无法兼容 webpack@5 ，于是就报错，不能继续编译。
于是我再次执行 ncu -u , npm i，开始更新vue-cli的版本至最新，问题解决。再次 npm run build ，继续报错。

Error: PostCSS plugin postcss-discard-comments requires PostCSS 8. Migration guide for end-users:

这个很显然是版本问题，执行一下 npm install postcss@8.2.2即可解决，这里不再多说。再次 npm run build ，继续报错。并提示：

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

于是执行 npx browserslist@latest --update-db ，再次 npm run build ，继续报错。

TypeError: compiler.plugin is not a function

关于这个报错，网上有很多解决方案，可能是不同原因导致的，关于webpack5 使用 PurifyCSSPlugin 插件去除多余css 报错TypeError: compiler.plugin is not a function 解决以及原因，但是我的代码中并没有使用这个插件。
控制台报错指向了compiler.plugin('emit', function (compilation, callback) {，看了新安webpack插件后编译报错compiler.plugin is not a function这篇文章后，将compiler.plugin('emit', function (compilation, callback) {替换成compiler.hooks.emit.tapAsync('GenerateAssetWebpackPlugin', (compilation, callback) => {。再次 npm run build ，继续报错。