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

【问题标题】：Webpack importing module from different chunk instead of up-to-date version available in the same chunkWebpack 从不同的块导入模块，而不是同一块中可用的最新版本
【发布时间】：2021-10-26 03:55:35
【问题描述】：

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

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

Here's a repo for reproducing this error

现在是长版：

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

我的应用程序不太正常的方面是这两个文件可能没有同时构建/编译。（这是有原因的，但不值得在这篇文章中讨论）

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

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

在探索条目/块时，我看到 包含我提到的类的本地化文件在全局块和登录块中获得相同的键 (786)。这似乎是 Webpack 的缓存机制假设它们都是同一个文件并且只加载它首先找到的文件的原因。

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

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

【问题讨论】：

标签： javascript webpack webpack-5

【解决方案1】：

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

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

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

【讨论】：