为什么我的 Webpack 捆绑包包含两次 jQuery？

Question

I set up a parent module with 2 submodule dependencies. The parent module has no specified jQuery dependency, but each submodule specifies jQuery ^3.3.1 as a dependency (results in 3.4.1 for each submodule). I Webpacked the parent module and then I see in the generated bundle file that jQuery 3.4.1 is included twice. What should I be doing so that the same version of jQuery isn't included twice? I did try the splitchunks plugin and it did generate chunks but jQuery was still in there twice. I thought that Webpack is supposed to automatically analyze dependencies in the module graph and optimize the bundled code? I haven't yet tested NPM peer dependencies or the Webpack de-dupe plugin. I'm also wondering if there's something about jQuery itself to where Webpack can't/decides not to de-dupe automatically?

In both submodules' index.js files, I'm using:

import $ from "jquery"

In each submodule's package.json I specified:

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

Then I did a npm install on each submodule.

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/',
        },
    },
};

Note -happens because Shariff 1.24.1 defines jQuery as its own dependency instead of defining it as peer dependency in the package.json .

Refrence

Answer 2

I found that module resolution can automatically happen downwards (into child folders) of an entry point folder, but not upwards (in module folders outside of the entry point folder). I found that I needed to "tell" Webpack about these other module locations by adding a "resolve" object to Webpack.config:

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