时间戳

首页 > 解决方案 > 将本地模块与 Webpack 4 一起使用会多次捆绑相同的依赖项

javascript - 将本地模块与 Webpack 4 一起使用会多次捆绑相同的依赖项

问题描述

我正在尝试找到一种在 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 被包含在构建包中 4 次以上，每个需要它的模块一个，即使它们都需要相同的版本并且所有源代码是同时编译的。

有人对此有解决方案吗？

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

标签： javascriptwebpackbundling-and-minificationwebpack-4

解决方案

将每个模块更改为将 lodash 作为对等依赖项而不是直接依赖项。所以在package.json文件中，改变这个：

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

至：

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

推荐阅读