使用 WebPack，如何创建可供使用的“拆分”捆绑包，其中一个捆绑包依赖于另一个捆绑包？

我的问题非常接近others https://stackoverflow.com/questions/34602831/webpack-build-bundle-without-dependencies我的回答是believe仍然需要另一个我想避免的 WebPack 步骤。但首先是这个故事：

我有一个 Node 模块（我们称之为libfoo）它提供了一些功能并需要一些第三方模块， 和一个small script main.js它提供了主要入口点并要求libfoo:

main.js:

const foo = require('foo');
function main() {
    foo.bar();
}
main();

我现在想转libfoo and main.js into 浏览器可执行文件使用 WebPack 的可交付成果。而且我要libfoo（相当大）静态驻留在目标系统上，同时main.js非常小并且变化很快（想象一下一个测试场景，其中libfoo是我想测试的模块main.js包含更改的代码片段）

我设法创建了两个包 - 让我们称它们为foo.browser.js and main.browser.js- 哪个contain所有需要的功能，但我无法做到main.browser.js正确导入foo.browser.js.

我还不太喜欢 WebPack - 到目前为止我还不知道发生了什么。我当前的方法如下：我构建foo.browser.js通过运行以下命令：

webpack --output-filename foo.browser.js foo.js

我有一个webpack.config.js for main.js看起来像这样：

module.exports = {
  externals: {'foo': 'foo'},  // don't know what I'm doing here - added `commonjs` and `root` randomly
}

I turn main.js into main.browser.js使用非常相似的命令：webpack --output-filename main.browser.js main.js

现在我尝试在名为的文件中使用这两个文件foo.html包含这些行：

<script src="dist/foo.browser.js"></script>
<script src="dist/main.browser.js"></script>

但当我现在打开foo.html在浏览器中我得到

external "foo":1 Uncaught ReferenceError: foo is not defined
    at Object.foo (external "foo":1)
    at __webpack_require__ (bootstrap:19)  
    at Object../main.js (main.js:3)  
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

我摆弄了一下（恐怕只是随机的）但没有运气。

我的场景中有一个限制，可能与我发现的其他（工作）示例有所不同：我需要foo.browser.js and main.browser.js to be "final"IE。它们必须在目标系统上运行无需任何进一步的后处理（就像再次运行 WebPack 将它们变成一个包）。

您可以使用这种类型的配置来做到这一点：

module.exports = [{
  resolve: {
    modules: ["."],
  },
  entry: {
    "foo": "foo.js",
  },
  output: {
    path: `${__dirname}/build`,
    filename: "[name].js",
    sourceMapFilename: "[name].js.map",
    library: "foo",
    // libraryTarget: "umd",
  }
},{
  resolve: {
    modules: ["."],
  },
  entry: {
    "main": "main.js",
  },
  externals: {
    "foo": "foo",
  },
  output: {
    path: `${__dirname}/build`,
    filename: "[name].js",
    sourceMapFilename: "[name].js.map",
  }
}];

这将在build/子目录。获得的钥匙main to use foo is:

1. The "foo": "foo"进入externals用于创建main捆。每当main要求foo它寻找它外在地在名为的“模块”中foo。我将“模块”放入引号中，因为当您有 UMD 格式的捆绑包并使用以下命令加载它们时script，没有模块系统。该代码不会查找实际的模块，而是查找名为的全局变量foo.

2. The foo包将自身作为变量导出到全局空间foo，这使得它可以被使用main.