首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我和Webpack一起得到了2个版本?

在开发过程中,出现与Webpack一起得到了两个版本的情况通常是由于依赖管理不当或配置错误导致的。下面是可能导致这种情况的几个原因:

  1. 依赖管理问题:当项目中的不同模块或组件依赖的Webpack版本不一致时,可能会导致出现两个不同版本的Webpack。这可能是因为不同的模块或组件使用了不同的Webpack版本,而这些模块或组件被同时引入到了项目中。

解决方法:检查项目的依赖管理文件(如package.json)中的Webpack相关依赖,确保所有模块或组件使用的是相同的Webpack版本。可以通过更新依赖版本或者使用锁定版本的方式来解决。

  1. 配置错误:在Webpack的配置文件中,可能存在错误的配置导致生成了两个不同版本的Webpack。例如,可能在配置文件中同时引入了两个不同版本的Webpack,或者配置了多个入口文件分别使用了不同版本的Webpack。

解决方法:仔细检查Webpack的配置文件,确保没有重复引入不同版本的Webpack,并且所有入口文件都使用相同的Webpack版本。

  1. 构建工具问题:有些构建工具(如脚手架工具)可能会默认集成了Webpack,并且使用了特定版本的Webpack。如果在使用这些构建工具时,手动引入了另一个版本的Webpack,就会导致出现两个不同版本的Webpack。

解决方法:查看使用的构建工具的文档,了解其集成的Webpack版本,并根据需要进行相应的配置。

总结起来,出现与Webpack一起得到了两个版本的情况通常是由于依赖管理不当、配置错误或构建工具问题导致的。解决方法是检查依赖管理文件、Webpack配置文件和构建工具的相关配置,确保统一使用相同版本的Webpack。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【分享】Vue.js新手入门指南

这里也强烈推荐大家学习ECMAScript6的时候参考这本书ECMAScript 6入门 11.在学习Vue.js的时候老是听到Webpack,这是啥? Webpack是一个前端打包构建工具。...12.为什么要用Webpack 前面说了,做一个单页应用程序本身就相当复杂,而且在做的时候肯定会使用到很多素材别的第三方库,我们该如何去管理这些东西呢?...还有前面讲到了Webpack是一个前端打包工具,前端代码为什么要打包呢?...前面说到Webpack还有构建的功能,这就不得不提到了ECMAScript6这个新版本的JavaScript,但是现在国内外还有很多人用着老版本的浏览器,这些浏览器并不支持ECMAScript6,那么我们的前端项目如何在这种浏览器上运行呢...这就需要Webpack的Loader自动载入一个转换器来将我们写的ECMAScript6转换成浏览器能支持的老版本JavaScript语言,这个转换器的名字叫做babel,如果你以后听到或者看到了这个单词

3.5K40

Parcel,零配置开发 React 应用!

webpack 已经经历三四年的发展,社区技术趋于成熟,它已经成为了前端开发中的必备工具。那问题来了,会有新的工具来挑战 webpack 的地位吗?...随着项目不断地扩大,你可能想做一些高级配置,就需要将 webpack 配置从 Create React App “拖”(eject)出来,这段配置异常复杂,这就回到了老问题——webpack 还是学习啊...在一个大项目中尝试使用 Parcel,效果拔群。build 出包经过优化,要知道用 webpack 的时候,需要花数天时间来实现相同的优化。...想这个工具潜力无限,我们一起来看看如何使用它来轻松搭建一个 React 应用。...目前 parcel 仅支持 node 8 或者以上版本。 Github 开源 在 Github 上 可以找到完整的代码。如果你觉得有帮助,欢迎 ★。

64450

回归 HTTP 协议本质:前端还能做哪些性能优化?

早在 Web 2.0 时代,那时短视频行业还没有兴起,一个最最最丰富的网站也不过是由文字图片组成,比如大家经常访问的酒妖、草榴等知名网站。...其中最常用的就是把所有能打包在一起的静态资源都打包成一个文件,比如 JS、CSS 等。 但这样的做法没有问题吗?当然有,不然也不会 cue 它。...对于前端来说,请求数量再也不是一个迫在眉睫的问题了 现代前端工程的复杂度今非昔比,复杂的交互逻辑、繁重的第三方依赖,如果再将所有资源文件打包在一起,那打包结果的体积将变得非常大,虽然请求数量得到了减少,...regex # 开启 gzip 时最低的 HTTP 版本 zip_http_version: 1.0 | 1.1 # 该指令用来指定资源的字节数 # 只有当资源的大小大于这个值时,才启用 gzip...关注后星标,成为的特别读者

62950

Webpack5.0 新特性尝鲜实战 ??

另外有关于Webpack4的配置Compiler->Compilation->Chunk->Module->Template整体运行原理国内外有很多优秀的文章这里就不一一展开了。...接下来天也不早了人也不少了,让我们一起干点正事。 ? (本图截自twitter列出了接下来v5版本的改进,嗯…感觉屏幕还是小了一点) ? (本图截自github,截图时间为3月12日。...我们看到目前开发进度到了57%) 一顿操作猛如虎指南 升级你的Node到8(V5将Node.js版本从6升级到了8) npm install webpack@next —save-dev npm install...让我们一起看看运行成功之后V5V4的对比图 V5打包到dist的main.js ? cmd-markdown-logo V4打包到dist的main.js ? V5打包过程 ?...老袁从业8年,几年前侥幸进入百度腾讯,后来在阿里offer创业之间选择了创业,更侥幸在27岁那年拿到了月薪30K+。 以下是总结的前端技术图谱,包含十大前端必会模块,可做参考 ?

1.4K30

【年终总结】微信前端社招有感

可能不同的岗位性质不同,要求也不同,对而言,整体上对业务解决能力要求很高,算法方面则没有太高要求 每轮都问到了职业规划,为什么离开目前的环境 总共经历了七轮(4轮技术、两轮GM、一轮HR),轮次可穿插并不是按顺序的...3、技术现场(1h) 本轮是前一轮衔接在一起的,这种方式挺好的,可以节约候选人来回奔波时间。...团队的成员分布,各角色职责定位,怎么进行版本迭代,一个系统的开发与维护周期是怎样的,项目延期的时候怎么做的 因为做的主要是内部系统(面向公司内部的需求),被问到为什么不尝试部门间转岗,为什么两年多了还一直在做内部系统...,回答七零八乱 问了JQ中选择器的识别解析顺序是怎样的,为什么从右到左,竟然说成了从左到右性能应该会更高。。。...渣渣电脑越来越卡,项目编译越来越慢, 在webpack4趋于稳定的时候,觉得应该升级升级以提升效率,果不其然,升级后速度提升了近7倍。

92840

最近,前端又火了哪些技术

------------------------------------------- 如下是今天我们要一起讨论的技术: Webpack5 Flutter React16.8 && Vue3 TypeScript...可以说火的一塌糊涂,但是笔者经历过Webpack1、2、3、4FIS1、2、3之后觉得Webpack其实还是可以做的更好。...我们发现在最近的新版本中已经完成到可用状态。 ?...因为ReactVue都是基于TS写的,因为比较成熟的库等等都是基于TS作为首选Demo~ ? 5. 更多 本来想继续往下去写一些具体的技术细节,突然停笔不想写了。为什么呢?...因为摸了摸日渐圆润的肚子键盘的些许头发,得出去运动一会了。但是还有更多的一些技术热点趋势想告诉大家,请大家能抽出时间仔细研究。

1.1K50

Snowpack,新时代前端构建的先锋

Snowpack 为什么会诞生?Web 构建为什么会进入 Bundleless 的时代?为什么 Pika 团队宁愿倾其所有去改变当下 Web 项目的构建现状?...改动了代码怎么看到更新?直接刷新网页!一切看上去都是那么的丝滑,所见即所得,可以说那个时候的前端,足够开门见山,足够简单粗暴,简单甚至让人有些怀念。...五年前,Webpack 打包,启动还挺快的。 五年后,还是在用 Webpack 打包,团队多了 20 个人,代码多了 20 万行,现在启动一次要 10 分钟!...直到 2018 年的某一天,主流的浏览器 Chrome/Safafi/Firefox 开始支持 ESModule,跟开发者们说,你们只需要把入口代码扔进来,给你请求所有需要导入的模块,你们不用再煞费苦心写什么打包器把代码放到一起了... Webpack 的关系 一方面,与 Webpack 对比,Snowpack 的优势就在于它的构建速度特别快。

51510

撸一个 webpack 插件,希望对大家有所帮助

最近,陆陆续续搞 了一个 UniUsingComponentsWebpackPlugin 插件(下面介绍),这是自己第三个开源项目,希望大家一起来维护,一起 star 呀,其它两个: vue-okr-tree...接口交互产生 side effect,进而影响到编译状态后续流程。.../loading/index" } } picker-column loading 都没有带 van 前缀,因为这个问题,在做 自动剔除 功能中,是根据 前缀来判断使用哪些组件的,由于这里的...希望 Vant 官方后面的版本能优化一下。 总结 本文通用自定义 Webpack 插件来实现日常一些技术优化需求。...主要为大家介绍了 Webpack 插件的基本组成简单架构,通过三个痛点,引出了 uni-using-components-webpack-plugin 插件,并介绍了使用方式,实现思路。

30510

大前端技术的边界在哪里?

点击“博文视点Broadview”,获取更多书讯 为什么你时常感觉到学不动?因为你已经不再是切图仔,你从 PC 时代进入到了移动互联网时代,正在迈进万物互联的时代。...你的战场,从 Web/H5 延伸到了 App,后来,小程序的横空出世又改变了局势,到现在,各种 IoT 智能硬件、智能汽车又相继问世,元宇宙 Web3.0 的新概念强势来袭,在此背景下,想必会有众多技术融合的最佳实践诞生...03 ▊《Webpack+Babel入门与实例详解》 姜瑞涛 著 适用于Webpackv5.0.0Babelv7.0.0之后的版本,是针对零基础前端开发者的Webpack与Babel图书。...本书主要使用的Webpack版本是v5.21.2,但对v5.0.0之后的版本都适用;主要使用的Babel版本是v7.13.10,但对v7.0.0之后的版本都适用。...06 ▊《低代码开发平台的设计与实现――基于元数据模型》 谢用辉 著 本书能让你一举三,一低代码开发平台,二元数据模型,三软件抽象能力 低代码开发平台是在不写或者只写极少量代码即可实现业务功能的软件平台

1.2K30

webpack】流行的前端模块化工具webpack初探

从开发文件到生产文件 有一天突然意识到一个问题,在使用react框架搭建应用时,使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率。...下面主要介绍一下webpack的使用 除了利用webpack实现开发代码 --> 生产代码的转换,我们为什么要用它做其他一些工作,比如文件打包(文件合并),JS/css压缩呢?...没错,webpack打包做的就是这样的作用 为什么要用webpack实现JS压缩? 打包一样,压缩文件也是为了提高页面性能,(大家可结合自己对那些打开极慢的网站的体验感受一下页面性能的重要性)。...需要事先做好备份工作) 为什么要用webpack实现sass,less的编译JSX模版文件的转换?...= require('moduleInpu') //输入模块 module.exports = { //输出模块   ... } 下面就一一来介绍如何用webpack实现上述三种功能: 首先你创建一个文件

1K60

webpack】流行的前端模块化工具webpack初探

从开发文件到生产文件 有一天突然意识到一个问题,在使用react框架搭建应用时,使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率。...下面主要介绍一下webpack的使用 除了利用webpack实现开发代码 --> 生产代码的转换,我们为什么要用它做其他一些工作,比如文件打包(文件合并),JS/css压缩呢?...没错,webpack打包做的就是这样的作用 为什么要用webpack实现JS压缩? 打包一样,压缩文件也是为了提高页面性能,(大家可结合自己对那些打开极慢的网站的体验感受一下页面性能的重要性)。...需要事先做好备份工作) 为什么要用webpack实现sass,less的编译JSX模版文件的转换?...= require('moduleInpu') //输入模块 module.exports = { //输出模块   ... } 下面就一一来介绍如何用webpack实现上述三种功能: 首先你创建一个文件

51740

尤雨溪-vite多久后能干掉webpack

webpack core 因为只针对打包不预设场景,所以设计极其灵活,不局限于针对 web 打包,几乎所有可配置的环节都做成了可配置的。这种极度的灵活性对于一些特定场景依然不可替代。...有些人的态度是这都是不痛不痒的东西 —— 怎么说呢,反正习惯了 Vite 的热更新速度之后你给我钱也不想再用 webpack。...为什么 webpack 抄不了 Vite 看到过不少人的态度是 “webpack 照抄一个不就行了”?如果你真的了解这两个东西,你就会知道抄不了,因为原理完全不一样。...比如你要用 TS,你自己起一个 tsc --watch 进程;你要用 babel,你自己不停地调用 babel-cli。...是不太明白为什么有些人总是用一种你死我活的心态去看待开源工具。开发 Vite 的初衷是让 Vue 用户以后可以少等点 HMR 的时间,后来发现顺道可以让其它框架的用户也受益而已。

1.4K20

找准切入点,调试看源码,事半功倍

这里教大家一个简单的方案,直接到 CDN 上下载官方编译好了的开发版源码(https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.development.js),中间的版本号可以替换成任何想看的版本...Vue官方文档 文档中提到了 Vue.compile ,然后我们就可以在源码中搜索这个 Api 开始进行调试。这就是带着目的去看源码,我们只有带着问题出发的时候,才会具有更高的效率。...而且,框架在迭代的过程中,变化会很多,可能你学习的是 React 16 的源码,搜到的 React 15 相关的文章,然后你会花很多时间精力想去弄清楚为什么你看到的别人写的为什么不一样,到底是你的打开方式不对...强制输出 有输出的学习才是学习,在阅读源码的过程中,一定边看边思考,思考的过程中,还需要形成文字记录,如果只是一直盯着代码看,很难理解。...在看源码的过程中,会一直思考,怎么样才能将这部分讲给别人听,是不是能写个 Demo 之类的,让大家跟着的思路来学习。这样即让自己学懂了,又可以将学习的过程分享出来帮助到其他人,何乐而不为。

1.1K30

听完李厂长雷布斯在乌镇讲AI段子,突然理解为什么这两个男人选择在一起

基于此,李彦宏雷军荣幸地登上了营长的今日榜单,营长将为你呈现出这两位掌门人在演讲上的“五个”的深厚功力。...在听完两人的演讲后,营长突然明白,这两个大男人为什么最终选择在一起了:两家的战略一个做的是猪肚,一个做的是凤头。...他们都是满足“五个”的实力演讲担当,没有马云口吐莲花的忽悠劲儿,又胜过马化腾低调朴实的没劲儿。相同的习性也让这两个男人在一起毫无违和感。 好了,营长扯了这么多,还是来一起听段子吧。...大家好,昨天下午我们参加了一个会议(营长:明明是约饭,有图有真相,吶) 极客公园张鹏就说现在很多的互联网创业者很焦虑,也很失落,为什么?...所以,觉得人工智能是一次移动互联网一样的技术革命,我们所有的企业都需要保持开放的心态,拥抱人工智能。 今天希望跟大家分享的是,我们小米是如何拥抱人工智能的,我们又有什么样的机遇。

84060

「后端小伙伴来学前端了」Vue中为什么直接安装less-loader会报版本过高错误?你有没有思考过?

大家都知道也是最近写的vue,看见周围人都在用这个,也就去安装了一下,但是一直都报一个版本过高的错误。这种错误非常好解决,因为后端也常遇到,直接降版本就好了。...因为好奇心的驱使,就在想,为什么不能安装最新less-loader?...而我们使用的vue的脚手架目前使用的webpack版本还是4.多的 我们可以去哪里查看呢?...打开node_modules,找到webpack文件夹,看package.json文件,查看内置的版本信息 在这个里面是可以直接看到它搭配的lessless-loader的。...---- 对了在这个地方不要产生一个误解,说一定要使用什么最新的才是最好的,而是要根据实际版本来选择最合适的,才是最好的。 后语 大家一起加油!!!

32820

新一代构建工具(1):对比rollupparcelesbuild—esbuild脱颖而出

用 Rust/C++ 你考虑非常多内存分配的细节。用 Rust/C++ 写过图的对此应该都有很深的体会。对于 Rust 这种尽量避免循环引用的语言,怎么表示图结构猜现在还没有一个很好的方案吧。...虽然伴随着功能、可读性、可维护性层面的的牺牲,但在编译性能方面几乎做到了极致。...将低版本 AST generate 为低版本源码,字符串形式Webpack 解析低版本源码Webpack 将多个模块打包成最终产物源码需要经历 string => AST => AST => string...轻量快速的开发伺服器,零设定即支援正式版本优化。Vite 可以适用于小型的个人项目Side-Project 或大型正式项目。为什么不使用Vite?...具体查看《webpack 或 esbuild:为什么不是两者兼而有之?

2.4K20
领券