Webpack 从不同块导入模块而不是同一块中可用的最新版本

Question

长话短说：我需要能够做这样的事情：

output: {
    moduleId: '[name].[contenthash].js',    
},

Here's a repo for reproducing this error

现在是长版：

简而言之：我有 1 个在所有页面上都可用的 JS 文件，以及 1 个特定于我的应用程序的每个页面的 JS 文件。到目前为止，非常正常。（例如：一个 global.js，一个 login.js）

我的应用程序不太正常的方面是 这两个文件可能不会同时 built/compiled。（这是有原因的，但不值得深入探讨 post）

问题在于：假设这两个文件都使用我创建的本地化 class。 global.js 文件将它导入到它的块中，login.js 文件导入相同的 class/module。现在让我们假设那个特定的 global.js 文件是在 login.js 之前 1 个月创建的，因此缺少我在处理 login.js 时添加到本地化 class 的几个方法。

出于某种原因，login.js 块没有使用在它自己的文件 中可用的 class，因为它似乎是某种缓存机制导致它使用 global.js 块中可用的过时 class 而不是 。这导致 login.js 中的代码调用 class 的未定义方法，因为它们在 global.js 创建时不存在。

在浏览 entries/chunks 时，我发现保存 class 我提到的 本地化文件在全局块和登录中获得相同的密钥 (786)块。这似乎就是为什么 Webpack 的缓存机制假设它们都是同一个文件并且只加载它首先找到的那个的原因。

（如果我手动将输出的 login.js 文件中的密钥从 786 更改为随机数，它会按预期开始工作）

我能做些什么来防止这种行为吗？

Answer 1

诀窍是创建一个插件，让我决定为模块提供什么 ID。所需的更改显示在下面的提交中。

https://github.com/Jeandcc/webpack-demo/commit/89d8ad1c7b8a0dd1156f3847aa95765b1a1de8a3

此插件只是为模块分配一个 ID，该 ID 是其名称与 buildHash 的组合，这应该有助于区分在不同时间构建的模块。

Webpack 从不同块导入模块而不是同一块中可用的最新版本

Webpack importing module from different chunk instead of up-to-date version available in the same chunk

javascript

webpack

webpack-5