webpack 4导出未按配置公开

Question

我正在从Webpack 3升级到4。

我的所有网页实际上都有两个入口点：一个在所有页面上共享，另一个是特定于页面的。

我以为我已经使用了webpack 4了，但似乎某些模块执行了两次；事实证明，即使模块位于共享的js文件中，每个入口点也会引导模块。

解决方案似乎是设置optimization.runtimeChunk = "single"，这将告诉webpack在所有块之间共享运行时。

看看js文件的输出，这看起来像预期的那样；但是，我的每个入口点都是通过以下配置公开其出口的：

output: {... libraryTarget: "var", libarary: ["MyLibrary", "[name]"]}

当我加载网页并尝试访问导出的对象/功能时，尝试以下操作时出现错误：

MyLibrary["entry"]

其中“ entry”是入口点之一的名称，结果是一个数字（而不是预期的对象，成员是各种命名的出口）。

如果我删除了optimization.runtimeChunk = "single"设置，那么MyLibrary["entry"]会返回带有导出内容的预期对象，但是同样的问题是我的模块可能被多次引导捆绑。

Answer 1

我知道了。

指定optimization.runtimeChunk = "single"时，它将输出一个名为runtime.js的文件。该文件必须包含在网页中，以便webpack起作用。一旦包含了该文件，一切就会按预期开始工作。

专业提示： optimization.runtimeChunk = "single"是以下操作的快捷方式：

optimization : {
  runtimeChunk: {
    name: 'runtime'
  }
}

如果将“运行时”重命名为与另一个块相同，则它将在该块中包含运行时代码位。