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

Question

我的问题与其他人的问题非常接近，我认为答案仍然需要另一个WebPack步骤，我想避免这一步骤。但是这里首先是故事：

我有一个libfoo提供一些功能并需要一些第三方模块的Node模块（我们称之为），还有一个小脚本main.js提供了主要的入口点并要求libfoo：

main.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

我有一个webpack.config.js为main.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是“最终的”，即它们必须在目标系统上运行而无需任何进一步的后处理（例如再次运行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. "foo": "foo"用于externals创建捆绑包的条目main。每当main请求时，它都会在名为 的“模块”中外部foo查找它。我将“模块”放入引号中，因为当您拥有 UMD 格式的捆绑包并使用 加载它们时，就没有模块系统了。该代码将查找名为 的全局变量，而不是查找实际的模块。fooscriptfoo

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