为什么`import`语句在Webpack 4中返回不同的实例？

Question

在Webpack 1-3中，我能够使用import，无论在何处使用，我收到的实例都与原始实例匹配。在Webpack 4中，如果文件位于不同的根目录中，似乎import将返回不同的实例。

• 文件A：/users/someone/projectA/file.js
• 文件B1：/users/someone/projectB/file1.js
• 文件B2：/users/someone/projectB/file2.js

在Webpack中，您可以使用别名，因此projectA/看起来像~A/中的projectB中的~B/中的。

我不知道这些别名是否重要，但是当将它们与不同目录中的文件一起使用时，我可能会执行以下操作：

// projectA/file.js
import B1 from '~B/file1'

还有这个：

// projectB/file2.js
import B1 from '~B/file1'

无论出于何种原因，每个文件中B1的实例都是不同的。在早期的Webpack版本中，它们是相同的。像Enzyme这样的工具取决于这些引用是否相同。

Webpack 4中的每个实例都发生了变化吗？

Answer 1

您需要将清单添加到Webpack配置：

optimization: {
    runtimeChunk: {
        name: 'manifest',
    },
},

这将链接您的入口点，以便它们都共享相同的导入引用；否则，Webpack无法知道一个入口点中的B1与另一个入口点中的B1是相同的。