解决“Error: Rule can only have one resource source (provided resource and test + include + exclude)”

又有一台服务器到期，不想续了，所以把东西往另一台服务器上搬。其中有一个小服务，用来存储 CI 测试失败的截图。里面有用到 font-awesome，但只用一个图标，太浪费。所以这次就顺手换成了 bootstrap-icons，然后顺便更新依赖，结果，再编译的时候，就报错：

ERROR  Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
   "exclude": [
     null
   ],
   "use": [
     {
       "loader": "/Users/meathill/Projects/mini-store-admin/node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js",
       "options": {
         "cacheDirectory": "/Users/meathill/Projects/mini-store-admin/node_modules/.cache/babel-loader",
         "cacheIdentifier": "219fb45a"
       },
       "ident": "clonedRuleSet-38[0].rules[0].use[0]"
     },
     {
       "loader": "/Users/meathill/Projects/mini-store-admin/node_modules/babel-loader/lib/index.js",
       "options": "undefined",
       "ident": "undefined"
     }
   ]
 }

非常诡异，按照错误栈点进去，从代码可以推断是生成的 webpack config 有问题，在 babel-loader 配置里既包含 resource 又包含 exclude。但是，这个项目是通过 @vue/cli 创建的，所以它的配置也是 @vue/cli-service 自动生成的，我并没有修改过。而且只有这个项目有问题，其它项目，同样使用 @vue/cli 创建，但是没有更新依赖，就没问题。

Google 之，有一些关于这个错误的讨论，但几乎都是用户自己写 webpack.config.js 没写好出问题。有人建议 rm -rf node_modules & rm package-lock.json & npm i，即重装所有依赖，我试了两次，也不行。

开始尝试、推翻、再尝试、再推翻。后来怀疑到 webpack ，在 package-lock.json 里查找之，发现安装的版本竟然是 5.1.0，而没有更新过依赖，可以正常编译的项目里都是 4.x。那基本可以确认了。

1. 先删掉 node_modules 和 package-lock.json
2. 手动在 package.json 的 devDependencies 里添加 "webpack": "^4.44.2"
3. 重新安装全部依赖： npm i
4. 尝试编译，npm run build，发现问题解决

总结

我猜问题是这样的：某些新版本的库要求 webpack@5，更新依赖时，根据依赖选择的规则，就以 webpack@5 作为主依赖安装。然而 @vue/cli 依赖 webpack@4，它自带的 webpack 配置无法兼容 webpack@5 ，于是就报错，不能继续编译。如果你也在使用 @vue/cli，那么请不要贸然升级 webpack@5。