webpack 版本冲突详细原因分析及解决办法「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

本项目使用vue/cli-4构建，在安装完less-loader后，npm run serve 时候报错，原因是webpack版本冲突

报错信息

Error: Rule can only have one resource source (provided resource and test + include + exclude) in {

“exclude”: [
null
],
“use”: [
{

“loader”: “/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/cache-loader/dist/cjs.js”,
“options”: {

“cacheDirectory”: “/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/.cache/babel-loader”,
“cacheIdentifier”: “72213e73”
},
“ident”: “clonedRuleSet-38[0].rules[0].use[0]”
},
{

“loader”: “/Users/truezir_tech_team/WebstormProjects/vue_shop/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/truezir_tech_team/WebstormProjects/vue_shop/node_modules/cache-loader/dist/cjs.js”,
“options”: {

“cacheDirectory”: “/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/.cache/babel-loader”,
“cacheIdentifier”: “72213e73”
},
“ident”: “clonedRuleSet-38[0].rules[0].use[0]”
},
{

“loader”: “/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/babel-loader/lib/index.js”,
“options”: “undefined”,
“ident”: “undefined”
}
]
}
at checkResourceSource (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:167:11)
at Function.normalizeRule (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:198:4)
at /Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:110:20
at Array.map ()
at Function.normalizeRules (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:109:17)
at new RuleSet (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:104:24)
at new NormalModuleFactory (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:636:31)
at Compiler.newCompilationParams (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:653:30)
at Compiler.compile (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:661:23)
at /Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/tapable/lib/HookCodeFactory.js:33:10), :24:1)
at AsyncSeriesHook.lazyCompileHook (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/tapable/lib/Hook.js:154:20)
at Watching._go (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:41:32)
at /Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:33:9
at Compiler.readRecords (/Users/truezir_tech_team/WebstormProjects/vue_shop/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:529:11)

分析

在npm install 安装完依赖模块后，使用webpack -v查看webpack 版本（注意，如果已经全局安装webpack 该命令会显示全局安装的webapck版本，要查看局部安装的版本号可以使用 npx webpack -v 查看），此时我的局部的webpack版本是4.x.x。接着安装less-loader （npm install less less-loader -D）安装完成后，由于less-loader 版本是10.x.x 版本太高，其依赖的weback 版本为 5.x.x （在执行上面的命令安装less-loader 时，5.x.x的版本会被安装）此时node_modules中就有两个webpack版本，所以在执行 npm run serve 时出现冲突

解决办法

卸载其中的一个版本，具体卸载哪一个呢？例如，我webpack原来的版本是4.x.x。我保留它。卸载另一个也就是5.x的版本，但是less-loader 要依赖它怎么办，很简单，换一个版本低一点的less-loader 就行了

• 卸载

卸载,不过我试过，直接用下面的命令卸载webpack 好像不起作用

npm uninstall webpack@5.x.x

重新安装之前4.x的版本替换5.x

npm install wepback@^4.0.0

• 安装低版本less-loader, ^符号表示下载大版本号不大于6的

npm install less less-loader@^6.0.0 -D

• 运行就不报错了

npm run serve