Question

我在使用Webpack 4时遇到问题，尝试用异步块预加载一些数据，然后在加载数据时，将使用webpack计算的另一个块附加到dom。

两个块都使用相同的实例，即Singleton，一次是在加载数据时作为容器，另一次是读取这些已加载的数据。

我希望它尽可能清楚。它与Webpack 3一起使用时，可能已经超过6个月了，但是今天我们迁移到了webpack 4，症状很明显：

在第一个块中，在加载数据时，将创建并填充实例。在这种情况下尝试使用数据时，看起来还可以。
在第二个块中，此后加载，该实例不存在或未填充。

Answer 1

我遇到了同样的问题，并通过添加以下内容解决了该问题：

optimization: {
  runtimeChunk: {
    name: 'commons' // <-- THIS
  },
  ...
}

到webpack配置。

github issue

Answer 2

我将在问题和答案上都进行扩展。

这是问题所在：

让我们假设您使用Webpack将代码分成两个块（我们称它们为a.bundle.js和b.bundle.js），并且您分别从Web浏览器中加载了每个代码块。让我们进一步假设您在MySingleton中有一个名为a.bundle.js的类，该类具有静态数据成员。问题在于，每个块都将看到该静态数据成员的不同版本，因为它将有效地为每个包创建一个新类。就像在包A中创建MySingleton1类，在包B中创建单独的MySingleton2类一样，两者完全独立地工作。

这是解决方案（扩展）：

Ed_le_fou的答案是正确的-您需要在Webpack中添加优化/ runtimeChunk。

执行此操作后，将生成一个名为commons.bundle.js的新文件（名称可能会因配置而异）。然后，您需要在a.bundle.js或b.bundle.js之前的页面中包含这个新的公共文件，以使单例正常工作。

因此，有效的结果是这样的：

<script type="text/javascript" src="/commons.bundle.js"></script>
<script type="text/javascript" src="/a.bundle.js"></script>
<script type="text/javascript" src="/b.bundle.js"></script>

如何使用Webpack在块之间共享单例实例？

2 个答案: