首页 > 解决方案 > Webpack 从不同的块导入模块,而不是同一块中可用的最新版本

问题描述

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

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

这是用于重现此错误的 repo


现在是长版:

简而言之:我有 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 更改为随机数,它将按预期开始工作)

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

标签: javascriptwebpackwebpack-5

解决方案


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

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

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


推荐阅读