在Webpack 4中使用本地模块会多次捆绑相同的依赖项

Question

我试图找到一种在npm中使用本地模块的好方法，或者构建大型应用程序的方法，以便将它捆绑到可能存在或不存在于单独存储库中的模块中。

每个本地模块都有自己的package.json和已安装的依赖项。

我的要求是模块是用ES6编写的，只是作为正在构建的主项目的一部分进行编译（所以我不会不断地建立很多依赖项）。

项目结构

/root
  /main-module 
    ... main js files <- entry point
    webpack.config.js
    package.json
  /module-1
    ... module 1 js files
    package.json
  /module-2
    ... module 2 js files
    package.json
  /module-3
    ... module 3 js files
    package.json

我目前正在通过在package.json中指定本地文件来调查使用本地模块，如下所示：

...
"dependencies": {
  "lodash": "^4.17.10",
  "module-1": "../module-1",
  "module-2": "../module-2",
  "module-3": "../module-3",
  "normalize.css": "^8.0.0"
}
...

您可以在此处查看整个项目：https://github.com/SamStonehouse/webpack-local-modules-test

我使用带有babel-loader的webpack，它不需要任何额外的设置来使用这个表单，甚至可以在模块文件完成时观察模块文件的更改和重建，这是惊人的。

问题：一旦构建了lodash，就会在构建的bundle中包含4次，每个模块需要一个，即使它们都需要相同的版本并且所有的源都是同时编译的。

• 我尝试过使用splitChunkPlugin，但无济于事
• 我已经尝试将lodash设置为本地模块中的devDependency（这是我不想做的事情，但它无论如何都没有工作）。

有人有解决方案吗？

或者以类似方式捆绑本地模块的另一种方法

Answer 1

将每个模块更改为peer dependency而不是直接依赖项。所以在package.json文件中，更改此内容：

  "dependencies": {
    "lodash": "^4.17.5"
  }

要：

  "peerDependencies": {
    "lodash": "^4.17.5"
  }