javascript - 使用 WebPack，我如何创建准备好使用 "split" bundle ，其中一个依赖于另一个？

Question

我的问题非常接近 others我相信的答案仍然需要我想避免的另一个 WebPack 步骤。但首先是故事:

我有一个 Node 模块(我们称之为 libfoo)，它提供了一些功能并需要一些第三方模块， 和一个小脚本main.js，它提供主要入口点并需要libfoo:

ma​​in.js:

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

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

我设法创建了两个包 - 让我们称它们为 foo.browser.js 和 main.browser.js - 包含所有需要的功能，但我无法使 main.browser.js 正确导入 foo.browser.js。

我还不是很喜欢 WebPack - 直到现在我还不知道发生了什么。我当前的方法如下所示:我通过运行以下命令构建 foo.browser.js:

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

我有一个用于 main.js 的 webpack.config.js，如下所示:

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

我使用非常相似的命令将 main.js 转换为 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 和 main.browser.js 为“final” 即它们必须在目标系统上运行无需任何进一步的后处理(比如再次运行 WebPack 将它们变成一个包)。

Answer 1

您可以使用这种类型的配置来完成:

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 使用 foo 的关键是:

1. externals 中的 "foo": "foo" 条目用于创建 main 包。每当 main 请求 foo 时，它都会在名为 foo 的“模块”中外部寻找它。我将“模块”放在引号中，因为当您拥有 UMD 格式的 bundle 并使用 script 加载它们时，没有模块系统。代码将查找名为 foo 的全局变量，而不是查找实际模块。

2. foo 包将自身作为变量 foo 导出到全局空间，这允许它被 main 使用。