How Can I Make Webpack Use a Cache-Busting Suffix?

Question

Before Webpack I would always rely on the following pattern for "cache-busting":

<script src="foo.js?cacheBust=12345" />

where 12345 was a token the sever generated for me on every build (it could be a Git hash, although in my case it isn't).

With Webpack I now have two files: build.js and chunk.1.js. Since I bring the first one in with a normal script tag I can use the above pattern:

<script src="build.js?cacheBust=12345" />

However, at that point build.js goes and fetches chunk.1.js, and when it does it doesn't include the cache-busting suffix.

I would like for Webpack to automatically append the ?cacheBust=12345, but I don't know the 12345 part at build time, so I can't include it in my webpack.config. Instead, I have to wait until the HTML page is evaluated, at which point I get the token from the server.

So, my question is, is there any way to have Webpack look at the parameter used to fetch the initial file (eg. ?cacheBust=12345) and append that same parameter when fetching other files?

Answer 1

If you would like to achieve cache busting in "webpack way":

1. Hash name of output files

Change output filenames to hash generated names (on build phase)

output: {
    path: '/',
    filename: '[hash].js',
    chunkFilename: '[chunkhash].js',
},

From that point your foo.js and chunk.1.js will be called like e883ce503b831d4dde09.js and f900ab84da3ad9bd39cc.js. Worth mention that generation of this files are often related to making production and time too update cacheBust value.

2. How to include not known names of files?

Since now your foo.js - main file is named in not known way. To extract this name of file you can use AssetsPlugin

const AssetsPlugin = require('assets-webpack-plugin');
const assetsPluginInstance = new AssetsPlugin();

and add this plugin to webpack.config.js

plugins: [
    assetsPluginInstance
]

In webpack-assets.json file you should see something like

{
    "main": {
        "js": "/e883ce503b831d4dde09.js"
    }
}

You can use this file to point to main .js file. For more details read this answer

3. Benefit time

I guess that if you make app production because of modification of chunk.2.js file, you change files paths from

- build.js?cacheBust=12345
- chunk.1.js?cacheBust=12345
- chunk.2.js?cacheBust=12345
- chunk.2.js?cacheBust=12345

to new ones

- build.js?cacheBust=12346   // modified referation to chunk.2.js file
- chunk.1.js?cacheBust=12346
- chunk.2.js?cacheBust=12346 // modified
- chunk.2.js?cacheBust=12346

If you would use above solution you will get free cache determination. Now filles will be called like

(previous production)

- e883ce503b831d4dde09.js
- f900ab84da3ad9bd39cc.js
- 5015cc82c7831915903f.js
- 8b6de52a46dd942a63a7.js

(new production)

- c56322911935a8c9af13.js // modified referation to chunk.2.js file
- f900ab84da3ad9bd39cc.js
- cd2229826373edd7f3bc.js // modified
- 8b6de52a46dd942a63a7.js

Now only main file and chunk.2.js names are changed and you will get this for free by using webpack way.

You can read more about long term caching here https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31