Cache-Reset with Webpack
Tags: webdev, webpack, javascript
Published: 2020-05-03 07:59:56

---
published: true
title: 'Cache-Reset with Webpack'
cover_image: 'https://raw.githubusercontent.com/ckotzbauer/dev.to-posts/master/blog-posts/2020/cache-reset-with-webpack/assets/header.png'
description: 'Impelement a basic cache-reset algorithm with Wepack'
tags: webdev, webpack, javascript
series:
canonical_url:
---

_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:

```js
[
  { 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:

```js
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:

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

## Result

Open your browser-network-tab:
![network-tab](https://raw.githubusercontent.com/ckotzbauer/dev.to-posts/master/blog-posts/2020/cache-reset-with-webpack/assets/network-tab.jpg)

## 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.