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

webpack 版本冲突详细原因分析及解决办法「建议收藏」本项目使用vue/cli-4构建,在安装完less-loader后,npmrunserve时候报错,原因是webpack版本冲突报错信息Error:Rulecanonlyhaveoneresourcesource(providedresourceandtest+include+exclude)in{“exclude”:[null],“use”:[{“loader”:“/Users/truezir_tech_team/WebstormProject

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/169223.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • phpstorm激活码2021.3破解方法

    phpstorm激活码2021.3破解方法,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 【转】plt.plot的颜色「建议收藏」

    【转】plt.plot的颜色「建议收藏」转载请注明出处:http://www.cnblogs.com/darkknightzh/p/6117528.html参考网址:http://stackoverflow.com/questions/22408237/named-colors-in-matplotlibhttp://stackoverflow.com/questions/8409095/matplotlib-set-markers-for-individual-points-on-a-line代码:plt.s.

    2022年10月11日
  • Jquery 跳出循环

    Jquery 跳出循环今天写jquery的时候,遇到写神奇的问题,给input的value赋值,用val和prop都不行,最后用attr才改变了。另外点上下按钮,想要切换到上一年/月下一年/月,是循环去找的,必须加returnfalse;<divclass=”divchoosetime”style=”width:50px;”><i…

  • 详解 JVM Garbage First(G1) 垃圾收集器「建议收藏」

    详解 JVM Garbage First(G1) 垃圾收集器「建议收藏」版权声明:本文为博主原创文章,转载请联系作者并注明出处。详解JVMGarbageFirst(G1)垃圾收集器前言GarbageFirst(G1)是垃圾收集领域的最新成果,同时也是HotSpot在JVM上力推的垃圾收集器,并赋予取代CMS的使命。如果使用Java8/9,那么有很大可能希望对G1收集器进行评估。本文详细首先对JVM其他的垃圾收集器进行总结,并与G1进

  • android美化界面设计_android界面模板

    android美化界面设计_android界面模板前言:很多童鞋对美化很感兴趣,都想拥有一个完完全全属于自己风格的手机系统!对那些自定义全局背景,1%电量显示,透明下拉菜单。。。都很感冒!美化的重点跟难点就在于对”framework-res.apk”和”systemUI.apk”这两个文件的编译和反编译!这里说的编译和反编译是所有深度美化都必须要做的事,也就是说,所有的美化都是基于对apk的反编译后,才能进行的!而绝大多数修改”framework…

  • 小草 客户端 android,小草app安卓版入口

    小草 客户端 android,小草app安卓版入口这里小编为大家提供一个非常不错的线上的看剧软件哦,这里每天都会更新一些市面上比较火爆的各种视频资源,而且更新的速度也是十分的快捷的,无需任何的花费,的大家就可以轻松的在线来观看了。整个平台为大家提供的各种服务也是十分的优质的,线上还有专业的客服人员在线为大家提供更加优质的服务哦。小草app安卓版入口的特色:1、线上的所有的视频资源内容都是有平台专业的人士为大家进行审核的,保证都是正版的内容哦;2、…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号