Webpack的“runtime”文件有什么作用？

Question

今天我在使用webpack进行转译时，只对我的核心业务逻辑代码进行了转译，但仍然使用CDN来获取jQuery、AngularJS等所有外部库。我想通过使用SplitChunksPlugin将这些供应商库移入webpack中，但是当我按照我在此处找到的示例操作时，虽然成功创建了供应商包，但它也同时创建了一些我不确定的额外文件。

对于我在webpack配置中声明的每个entry模块，webpack都会创建一个相应的“runtime”版本文件。

例如，我有一个company.productA.core.bundle.js文件已经使用了一段时间，但在添加了拆分块的配置后，我现在还得到了一个company.runtime~productA.core.bundle.js文件。Webpack对我创建的另外8个模块也做了同样的处理。

我尝试搜索了解这些文件，但在webpack文档和SO上都没有找到相关信息。

请问有人能解释一下这些文件的用途吗？

- Matt Hintzke

Answer 1

每个运行时文件都包含启用加载代码块的代码。如果您打开任何一个这些运行时文件，您将看到通过 Jsonp 加载块的代码。由于您已要求 webpack 分割代码块，因此您现在可以随时加载任何代码块。因此，对于每个代码块，webpack 发出这些运行时文件，以便正确处理要求。

- Ravi Tiwari

---

嗯，有趣。那是不是意味着我想要将“运行时”文件加载到我的HTML脚本标签中，以便可以加载这些块？我目前正在尝试加载非运行时文件，但基本上所有的外部和内部库都会出现“angular未定义”的错误。 - Matt Hintzke

你需要运行时才能使用webpack加载其他内容。 - PlayMa256

Answer 2

如果您将包分成多个块（例如，每个页面一个），并且由于某些原因想在一个页面上使用几个块，则可能会遇到一些问题。例如，默认情况下，当您需要单例时，特别是在两个块中导入相同的库时，每个块都会有一个不同的单例或库实例，这可能会成为问题。

为了解决这个问题，并且让多个块共享一个实例，您需要在webpack优化部分内使用runtimeChunk: 'single'。

因此，webpack文档中有如下警告：

导入的模块为每个运行时块单独初始化，因此如果在页面上包含多个入口点，请注意此行为。您可能希望将其设置为single或使用另一种允许您仅拥有一个运行时实例的配置。

更多信息

- Oleg

---

类似于这个问题，我在运行时配置Webpack 5动态加载块时遇到了问题。有一个带有悬赏的问题：https://dev59.com/KVd1hooBIXSAPYfQ2xS5@Oleg - 你能否请看一下并帮助我详细了解如何更改设置？ - Mithun Shreevatsa