Laravel-mix: Cache Busting on Webpack Chunks

[vpillinger]

• Laravel Mix Version: 4.0.16 (npm list --depth=0)
• Node Version (node -v): v10.15.3
• NPM Version (npm -v): 6.9.0
• OS: Windows 10 WSL

Description:

There does not seem to be a good cache-busting mechanism for webpack chunks that plays nicely with Git.

Steps To Reproduce:

1) Create a standard laravel/mix project the with the mix.version() option.
2) Create a dynamic import:
import(./dashboard.js /* webpackChunkName: "js/dashboard" */);
just put console.log('version1') in the imported file.
3) npm run dev -- This creates the following
js/app.js
js/dashboard.js
4) Go to site, observe version1 in the console
5) Change the chunk to console.log('version2')
6) Go to site, observe version1 in the console

The issue:
The mix-manifest file will get versioning, but the webpack chunk mechanism ignores it:
eg

{
    "/js/app.js": "/js/app.js?id=68f34ebc16f9097ba774",
    "/dashboard.js": "/dashboard.js?id=77a5c8ae270db4d8cf2d",
}

Workaround:

Add [hash] to the chunkName, but this causes files to be added/deleted in Git constantly, which is not ideal.

Ideal Solution:
There is a way to make webpack chunks use query-string cache busting like Laravel Mix currently does.

[vpillinger]

I found out how to do this, but I will leave the solution here for the next person to try to solve this.

First add this to your webpack config:

mix.webpackConfig({
    output: {
        chunkFilename: '[name].js?id=[chunkhash]',
    }
});

Then, when you specify the chunk name using this: /* webpackChunkName: "js/dashboard" */
You will get this as a result: js/dashboard.js?id=0791710073c12eff5a3d in the webpack output dialog.

The file will be saved as js/dashboard.js but referenced in the browser as js/dashboard.js?id=0791710073c12eff5a3d.

[gtempesta]

Will the id be identical to the one you see in mix-manifest?

[gtempesta]

I have checked and the ids are different, but even with different ids we verified that cache busting is working with this approach.