问题再现
因项目需要，在前端项目中安装compression-webpack-plugin插件
- 运行
npm install compression-webpack-plugin命令之后在package.json文件中已经出现了"compression-webpack-plugin": "^7.1.2"这个依赖项
- 运行
npm run serve命令启动项目，报错信息如下：
ERROR Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "/Users/lyb/Downloads/wcp-front-vue/node_modules/cache-loader/dist/cjs.js",
"options": {
"cacheDirectory": "/Users/lyb/Downloads/wcp-front-vue/node_modules/.cache/babel-loader",
"cacheIdentifier": "61a7e43e"
},
"ident": "clonedRuleSet-38[0].rules[0].use[0]"
},
{
"loader": "/Users/lyb/Downloads/wcp-front-vue/node_modules/babel-loader/lib/index.js",
"options": "undefined",
"ident": "undefined"
}
]
}
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "/Users/lyb/Downloads/wcp-front-vue/node_modules/cache-loader/dist/cjs.js",
"options": {
"cacheDirectory": "/Users/lyb/Downloads/wcp-front-vue/node_modules/.cache/babel-loader",
"cacheIdentifier": "61a7e43e"
},
"ident": "clonedRuleSet-38[0].rules[0].use[0]"
},
{
"loader": "/Users/lyb/Downloads/wcp-front-vue/node_modules/babel-loader/lib/index.js",
"options": "undefined",
"ident": "undefined"
}
]
}
at checkResourceSource (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:167:11)
at Function.normalizeRule (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:198:4)
at /Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:110:20
at Array.map (<anonymous>)
at Function.normalizeRules (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:109:17)
at new RuleSet (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:104:24)
at new NormalModuleFactory (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:636:31)
at Compiler.newCompilationParams (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:653:30)
at Compiler.compile (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:661:23)
at /Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/lyb/Downloads/wcp-front-vue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (/Users/lyb/Downloads/wcp-front-vue/node_modules/tapable/lib/Hook.js:154:20)
at Watching._go (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:41:32)
at /Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:33:9
at Compiler.readRecords (/Users/lyb/Downloads/wcp-front-vue/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:529:11)
npm ERR! code 1
npm ERR! path /Users/lyb/Downloads/wcp-front-vue
npm ERR! command failed
npm ERR! command sh -c vue-cli-service serve
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/lyb/.npm/_logs/2021-03-10T08_03_23_083Z-debug.log
-
出现错误后小编只能求助度娘，度娘的解决方案如下：
- 卸载
webpack：npm uninstall webpack
- 重新安装
webpack:npm install webpack@4.0.0 --save-dev ，这个时候直接报错，报错信息如下：
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack@4.0.0
npm ERR! node_modules/webpack
npm ERR! dev webpack@"4.0.0" from the root project
npm ERR! webpack@"^4.0.0" from @vue/cli-plugin-babel@4.5.8
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev @vue/cli-plugin-babel@"^4.2.3" from the root project
npm ERR! 4 more (terser-webpack-plugin, @vue/cli-plugin-eslint, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.1.0" from compression-webpack-plugin@7.1.2
npm ERR! node_modules/compression-webpack-plugin
npm ERR! compression-webpack-plugin@"^7.1.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/lyb/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/lyb/.npm/_logs/2021-03-10T08_16_11_779Z-debug.log
- 上面的报错信息大概意思就是说插件
@vue/cli-plugin-babel@4.5.8依赖webpack@"4.0.0"版本，而插件compression-webpack-plugin@7.1.2依赖webpack@"^5.1.0"版本
问题原因：因为两个插件依赖的webpack包版本不一致导致冲突
解决方案
-
卸载高版本的compression-webpack-plugin插件：npm uninstall compression-webpack-plugin
-
卸载webpack插件：npm uninstall webpack
-
安装低版本的compression-webpack-plugin插件：npm install compression-webpack-plugin@4.0.0
-
重新安装webpack插件：npm install webpack@4.0.0 --save-dev
经过以上步骤之后完美解决问题
总结
在使用脚手架的时候不要过度追求新版本，要考虑不同插件之间对依赖项的版本问题。
