为什么我的Webpack捆绑包里包含了两次jQuery？
Webpack是一个用于打包和构建前端项目的工具，它可以帮助我们管理项目中的各个模块和资源，提供了模块化开发、代码优化、文件压缩等功能。当我们使用Webpack打包项目时，有时会遇到打包后的捆绑包中包含了多次重复的jQuery库的情况。
出现这种情况的原因通常有以下几点：
- 多个入口文件引入了相同的依赖：如果项目中存在多个入口文件，并且这些入口文件都引入了相同的依赖（比如jQuery），那么在打包时就会将这些入口文件中的依赖都打包进捆绑包中，导致重复出现。
解决方法：可以通过配置Webpack的entry属性，将这些重复引入的依赖进行提取，例如使用splitChunks插件将公共模块提取成单独的文件，避免重复打包。
- 外部依赖没有通过Webpack进行打包：如果项目中引入了外部依赖（比如通过CDN引入的jQuery），而这些依赖没有在Webpack的配置中进行处理，Webpack会认为这是一个项目中的模块，导致重复打包。
解决方法：可以通过配置Webpack的externals属性，告诉Webpack这些依赖已经在外部引入了，不需要再进行打包。例如可以将jQuery配置为externals，然后通过script标签在HTML中引入jQuery的CDN链接。
- 模块之间的依赖关系存在问题：有些情况下，项目中的模块之间的依赖关系可能存在问题，导致Webpack无法正确地识别和处理这些依赖，从而导致重复打包。
解决方法：可以检查项目中的模块依赖关系，确保它们的引用关系正确无误。如果发现问题，可以尝试调整模块之间的依赖关系或者重构代码，以确保Webpack能够正确地打包和优化项目。
综上所述，当Webpack捆绑包中包含了两次jQuery时，可能是因为多个入口文件引入了相同的依赖、外部依赖没有通过Webpack进行打包或者模块之间的依赖关系存在问题。我们可以通过配置Webpack的entry属性、externals属性或者检查项目中的模块依赖关系来解决这个问题。
腾讯云相关产品推荐：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 云函数（SCF）：https://cloud.tencent.com/product/scf
- 云开发（TCB）：https://cloud.tencent.com/product/tcb
- 云原生应用平台（TKE）：https://cloud.tencent.com/product/tke
注意：以上推荐的腾讯云产品仅供参考，并非对其他品牌的云计算产品的替代。
相关·内容
我设置了一个带有2个子模块依赖项的父模块。父模块没有指定的jQuery依赖项，但每个子模块都将jQuery ^3.3.1指定为依赖项(导致每个子模块的依赖项为3.4.1 )。我用Webpacked打包了父模块，然后在生成的包文件中看到jQuery 3.4.1包含了两次。我应该怎么做才能使同一版本的jQuery不
浏览 15提问于2019-10-17得票数 1
回答已采纳
我在React库中遇到了一个问题，Google显示了一个未被察觉的SyntaxError: Proto-Types.js (import PropTypes from 'prop-types')第一行中的意外标识符我正在运行以下版本的相关软件包: React: 16.2.0Reaction-Table: 6.8.0支持类型: 15.6.1import ReactPropTypes.e
浏览 0提问于2018-04-03得票数 2
回答已采纳
我在VS2017 (ASP.NET MVC Core，.NET 4.6)中创建了一个web应用程序，并为visual安装了web扩展"use strict" let path = require('path'); /&
浏览 1提问于2017-09-07得票数 0
回答已采纳
我和webpack在我的节点项目中设置了捆绑。我已经创建了webpack配置文件到捆绑文件。但是在包含包文件之后，我得到了一个错误。 我尝试将jquery文件捆绑到输出路径中。我可以使用以下webpack.config.js代码将其捆绑在一起。/public/javascripts"
浏览 17提问于2019-06-12得票数 0
回答已采纳
webpack会不会对已经和webpack捆绑在一起的套餐进行去重呢？例如，| Webpack bundle 1 | |------------------| | react@15.5 | | jquery@3.0 |
| Webpack appbundle | |--------------------| | react@15.5 | | jquery@3.1 | | Webpack</
浏览 7提问于2017-05-15得票数 0
我也见过其他类似的问题。我所看到的问题是在Webpack 4释放之前提出的，没有具体问到国家预防机制，也没有得到明确的回答。假设我使用webpack将包含依赖项的包捆绑在一起，我不想将这些依赖项归类为webpack外部和npm对等依赖。然后，我将此软件包发布给npm。
有人下载我的包<
浏览 0提问于2018-10-22得票数 3
回答已采纳
我有一个新的Vue 3安装了vue-cli和typescript。一切都在运行，但是当我添加一个https://vue-select.org/包时，我在浏览器控制台上得到这个错误 Uncaught (in promise) TypeError: this.5c40:5090) 简单的例子 Home.vue <div class="home">
<img alt="Vue logo&q
浏览 423提问于2021-07-06得票数 0
2回答
如何通过webpack或gulp+browserify进行捆绑，除非指定要求，例如忽略var module = require(pathToModule);，以便生成的捆绑也包含var module =
浏览 1提问于2016-05-17得票数 0
我是新来的Webpack，正在寻找一个选项，将我的单曲条目从捆绑中排除。所以我的webpack.config.js现在看起来就像这样： entry: '.output: { filename: 'all.bundle.js'};
all.js已经是由TypeScript转换程序创建的<
浏览 0提问于2016-11-28得票数 0
要使用importScripts在web worker中加载特定于worker的捆绑包，我需要告诉Webpack将Webpack的所有客户端特定代码都放到该worker捆绑包中(webpackJsonp、_webpack_require__等)。下面是入门捆绑包配置： app: [ &
浏览 6提问于2018-05-15得票数 4
我有一个有2个捆绑包的应用程序，react等常用模块被提取到一个供应商捆绑包中。我正在添加第三个包，我不想从中提取公共依赖项。这有没有可能。这个问题与相关，但是这是关于为每个入口点创建多个供应商捆绑包，而我希望其中一个捆绑包不需要供应商。在我的例子中，这是因为脚本是一个简单的站点验证脚本，它被设置在头部中，因此
浏览 18提问于2017-02-16得票数 0
目前正在开发ASP.NET MVC应用程序，在探索了angular之后，我对在我的ASP.NET MVC应用程序中使用webpack进行捆绑和最小化并不是很兴奋。按照webpack指南中的所有步骤，我能够捆绑和压缩js文件。
但是当我在我的应用程序中引用捆绑包时，它比ASP.NET捆绑包花费更多的时间。以下是A
浏览 3提问于2017-10-10得票数 6
为了获得更小的包，我已经将项目中的所有rxjs导入更改为新的推荐语法。我直接从rxjs包导入像interval这样的静态方法，从rxjs/operators导入pipeable运算符。我遵循并在我的webpack配置中包含了路径映射和启用的模块连接。
我仍然看不到捆绑包大小的
浏览 8提问于2018-07-17得票数 1
我已经与jQuery和其他一些全局插件捆绑在一起。我还捆绑了"fancybox“插件，捆绑了"swiper”插件。(它们是jQuery插件，但不包括jQuery和在我的jQuery包中工作) 但是，"tooltipster“插件包中包含了它自己的jQuery。与"
浏览 3提问于2019-05-22得票数 0
我想在我的React应用程序中使用这个库：，但它是基于jQuery构建的。我已经在我的Index.js React组件中添加了以下相关代码：import 'propellerkit/dist/js/propeller.js';我也尝试过这个：
import 'jquery
浏览 13提问于2017-08-15得票数 0
回答已采纳
2回答
我有一个非常基本的javascript项目，它使用了webpack (^2.6.0)作为一个模块捆绑器。有一个作为供应商模块的依赖项，而我有一个入口点。供应商捆绑包还包含了webpack引导代码，它是在加载我的任何模块之前加载的。，它也永远不会在引导代码运行之前执行，这意味着我不能在IE11上使用这段代码，除非我在我的w
浏览 2提问于2017-05-25得票数 5
我正在使用和来构建一个简单的交互式日历。我正在使用Webpack 2将我的JS捆绑到一个文件中。下面是我的webpack.config.js文件的一个简化版本(完整的内容要加载的内容远不止这个)。module: { }
我</em
浏览 0提问于2017-03-31得票数 3
我按照webpack官方的“快速入门”指南找到了一个前端页面，我想知道它是否也打算在开发环境中使用。我设法捆绑了我所有的foo.js依赖项，但是每次修改我的foo.js时，我都必须将所有东西捆绑在一起吗?还是有其他方法能够编写代码并继续使用捆绑的依赖项？webpack.config.js
var path = require('path
浏览 14提问于2018-02-18得票数 0
1回答
我这里有一个比较基本的webpack配置。 entry: ".webpack将jQuery导出为一个全局的(因为我使用的一些软件包寻找一个jQuery全局包)。docs声明可以这样做： $: 'jquery',
jQu
浏览 0提问于2018-02-28得票数 0
回答已采纳
我正在开发一个React应用程序，使用Webpack来创建bundle.js文件。尽管我的应用程序非常简单，但bundle.js文件的大小约为11MB。当我使用分析捆绑包文件时，bundle.js中包含了1000多个包。其中一些包在package.json文件的devDependencies部分中定义。
因此，我正在寻找以下问题的答案。有没有办法减小webpack汇编的</
浏览 10提问于2016-04-19得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
