webpack 4 导出未按配置公开

Question

我正在从 Webpack 3 升级到 4。

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

我以为我已经掌握了使用 webpack 4 的一切，但看起来我的一些模块执行了两次；事实证明，每个入口点都引导了一个模块，即使该模块位于共享的 js 文件中。

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

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

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

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

MyLibrary["entry"]

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

如果我删除 optimization.runtimeChunk = "single" 设置，那么 MyLibrary["entry"] returns 预期的对象与我的导出，但是我有同样的问题，我的模块可能被引导多次.

Answer 1

我想通了。

当您指定 optimization.runtimeChunk = "single" 时，它会输出一个名为 runtime.js 的文件。该文件必须包含在网页中才能使 webpack 运行。包含该文件后，一切都按预期开始工作。

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

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

如果您将 "runtime" 重命名为与另一个块相同，它将包含该块中的运行时代码位。

webpack 4 exports are not being exposed as configured