为什么我的 Webpack 包包含两次 jQuery？答案

【问题标题】：Why does my Webpack bundle include jQuery twice?为什么我的 Webpack 包包含两次 jQuery？
【发布时间】：2020-02-13 12:23:36
【问题描述】：

我设置了一个具有 2 个子模块依赖项的父模块。父模块没有指定的 jQuery 依赖项，但每个子模块都指定 jQuery ^3.3.1 作为依赖项（每个子模块的结果为 3.4.1）。我对父模块进行了 Webpacked，然后在生成的捆绑文件中看到 jQuery 3.4.1 包含两次。我应该怎么做才能不包含两次相同版本的 jQuery？我确实尝试了 splitchunks 插件，它确实生成了块，但 jQuery 仍然在那里两次。我以为Webpack应该自动分析模块图中的依赖关系并优化捆绑的代码？我还没有测试过 NPM 对等依赖项或 Webpack 重复数据删除插件。我还想知道 jQuery 本身是否存在 Webpack 无法/决定不自动删除重复数据的地方？

在两个子模块的 index.js 文件中，我都在使用：

import $ from "jquery"

在我指定的每个子模块的 package.json 中：

"dependencies": {
"jquery" : "^3.3.1"
}

然后我对每个子模块进行了 npm 安装。

【问题讨论】：

标签： javascript jquery webpack

【解决方案1】：

module.exports = {
    resolve: {
        alias: {
            // fix every jQuery to our direct jQuery dependency. Shariff 1.24.1 brings its own jQuery and it would be included twice without this alias.
            'jquery': __dirname + '/node_modules/jquery/',
        },
    },
};

注意 - 之所以发生，是因为 Shariff 1.24.1 将 jQuery 定义为它自己的依赖项，而不是在 package.json 中将其定义为对等依赖项。

Refrence

【讨论】：

谢谢帕思。我刚刚在我的父模块上做了“npm list”，我在那里看不到Shariff。我刚刚尝试在 webpack.config 中使用此解析进行构建，并收到无法在我的子模块中解析 jquery 的错误。另外，我不想强制每个模块都使用相同版本的 jQuery（尽管实际上他们可能会这样做）。
刚刚看到dedupe插件不再是Webpack的一部分，所以我不会尝试
所以我开始明白，如果我的子模块物理上位于父模块的文件夹中，那么 NPM 可以删除依赖项，因为从一开始它只会安装一次依赖项。因此，我的捆绑包仅获得 1 个 jQuery 副本。现在要弄清楚我是否可以以及如何允许将模块保存在父模块的文件夹之外，是时候进行测试了

【解决方案2】：

我发现模块解析可以自动发生在入口点文件夹的下方（进入子文件夹），但不能向上（在入口点文件夹之外的模块文件夹中）。我发现我需要通过向 Webpack.config 添加一个“resolve”对象来“告诉”Webpack 这些其他模块的位置：

resolve: {
        modules: [
          path.resolve(__dirname, "src/modules/pagetype/node_modules"),
          path.resolve(__dirname, "src/modules/sitewide/node_modules"),
          path.resolve(__dirname, "src/modules/template/node_modules"),
          "node_modules"
        ]
      }, // resolve

【讨论】：