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

Long-story short: I need to be able to do something like this:

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

Here's a repo for reproducing this error

Now the long version:

In short: I have 1 JS file that is available on all pages, and 1 JS file specific for each page of my application. So far, pretty normal. (Ex: one global.js, and one login.js)

The not-so-normal aspect of my application is that those two files might not have been built/compiled at the same time. (There's a reason for this but not worth getting into on this post)

Here's the problem: Let's suppose both files use a Localization class I created. The global.js file imports it into its chunk, and the login.js file imports the same class/module. Now let's suppose that that specific global.js file was created 1 month before login.js, and therefore is missing a couple of methods I added to the localization class while working on login.js.

For some reason, the login.js chunk is not using the class that is available inside its own file, as it seems like some caching mechanism is causing it to use the outdated class that is available in the global.js chunk instead. That causes the code in login.js to call undefined methods of the class, given that they didn`t exist by the time that global.js was created.

When exploring the entries/chunks, I see that the localization file that holds the class I mentioned gets the same key (786) in the global chunk and in the login chunk. This seems to be the reason why the caching mechanism assumes they are both the same file and only loads the one it finds first.

(If I manually change the key in the outputted login.js file, from 786 to a random number, it starts working as expected)

Is there anything I can do to prevent this behavior?

CodePudding user response：

The trick was to create a plugin that let's me decide what ID to give to modules. The changes required are shown in the commit below.

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

This plugin simply assigns the module an ID that is a combination of its name with the buildHash, which should help differentiating modules that are on different versions.