时间戳

首页 > 解决方案 > webpack 4 导出未按配置公开

webpack-4 - webpack 4 导出未按配置公开

问题描述

我正在从 Webpack 3 升级到 4。

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

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

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

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

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

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

MyLibrary["entry"]

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

如果我删除该optimization.runtimeChunk = "single"设置，然后MyLibrary["entry"]返回预期的对象和我的导出，但是我有同样的问题，我的模块可能被引导多次。

标签： webpack-4

解决方案

我想到了。

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

专业提示： optimization.runtimeChunk = "single"是一个快捷方式：

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

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

推荐阅读