使用WebPack，如何根据另一个创建随时可用的“拆分”捆绑包？

Question

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

我有一个Node模块（让我们称之为libfoo ），它提供了一些功能，需要一些第三方模块，以及一个小脚本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为“最终” iE他们必须在目标系统上运行而没有任何进一步的后处理 （比如再次运行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/子目录中生成两个bundle。 main使用foo的关键是：

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

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