How to use a cache busting filename with webpack

Sat, 17 Jul 2021 00:00:00 +0000

If you’re using a custom webpack config, instead of a template or Create React App, you’ll want to make sure the filename has a cache busting suffix. Cache busting means making sure the users browser loads the newest version of our app, if it has been updated, instead of using a cached version.

A naive webpack setup would just use a single output file with a fixed name.

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/index.js',
    plugins: [
      new HtmlWebpackPlugin(),
    ],
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  }

Here, we are using HtmlWebpackPlugin to manage the creation of our index.html file and it will handle inserting a <script> tag into the index.html with our bundle filename. For now we are bundling all of our JavaScript into single file called bundle.js.

Caching on dev notes

How to use a cache busting filename with webpack