Cache-Reset with Webpack

Originally published on January 22, 2017

There are several strategies to implement a caching mechanism. The common way with Webpack is, to change the file
name and add a content-based hash. The advantage of this is, that the file only needs to be reloaded if its content
changed. But the disadvantage is (e.g. for images) that all references in your source-code have to be modified in
order to match the different file names, but this seems to be solvable. But what happens, if you start generating some paths
through variables at runtime? So I considered to use a fairly old mechanism: Cache-Busting with a Query-Parameter.
To append this parameter to all the code references, I wrote a custom webpack-loader.

Usage

First, install the loader through npm:

npm install cache-bust-loader

Assuming, that the list of loaders in your webpack.config.js looks similar to this:

[
  { test: /\.css$/, loader: ExtractTextPlugin.extract({ loader: 'css-loader' }) },
  { test: /\.html$/, loader: 'raw-loader' },
  { test: /\.ts$/, loader: 'awesome-typescript-loader' },
];

Now, simply add the cache-bust-loader to each file-type where you reference other files which you want to be cache-busted:

const cacheBustLoader = `cache-bust-loader?name=bust&value=${bustValue}`;

[
  { test: /\.css$/, loader: ExtractTextPlugin.extract({ loader: `${cacheBustLoader}!css-loader` }) },
  { test: /\.html$/, loader: `${cacheBustLoader}!raw-loader` },
  { test: /\.ts$/, loader: `${cacheBustLoader}!awesome-typescript-loader` },
];

The loader has three parameters:

Parameter	Mandatory	Data type	Default value
name	True	String
value	False	String
types	False	String	eot;woff;woff2;svg;ttf;otf;jpg;jpeg;png;ico;gif;json

The name describes the name of the query parameter, the value the string which should change every build.
If the value is empty, no parameters are applied (e.g. in development mode). The types are file-types
which you want to be cache-busted. Split them with a semicolon.

To generate a short unique string for each build you can fill bustValue like this:

bustValue = require('randomstring').generate(5);

Result

Open your browser-network-tab:

Conclusion

This webpack-loader makes it easy to implement a basic cache-reset mechanism. All files matching the file-type have the query-parameter appended
and are reloaded if a new version of your frontend-project is deployed.

Found a typo?

If you've found a typo, a sentence that could be improved or anything else that should be updated on this blog post, you can access it through a git repository and make a pull request. Instead of posting a comment, please go directly to https://github.com/ckotzbauer/dev.to-posts and open a new pull request with your changes.