為什么我的 Webpack 捆綁包包含兩次 jQuery？

Question

我設置了一個具有 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。

Answer 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中將其定義為對等依賴項。

參考

Answer 2

我發現模塊解析可以自動發生在入口點文件夾的下方（進入子文件夾），但不能向上（在入口點文件夾之外的模塊文件夾中）。 我發現我需要通過將“解決”object 添加到 Webpack.config 來“告訴”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