DEV Community

Cover image for Cache-Reset with Webpack
Christian Kotzbauer
Christian Kotzbauer

Posted on • Updated on


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.


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);


Open your browser-network-tab:


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 and open a new pull request with your changes.

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!