webpack-cache-buster-plugin

1.0.5 • Public • Published

Webpack Cache Buster Plugin

A simple Webpack plugin to add cache-busting query strings to your HTML files by appending a random version identifier to specified file references.

Usage

Add the plugin to your webpack.config.js and specify the HTML files and filenames you want to cache bust.

Install using:

npm install webpack-cache-buster-plugin --save-dev

Webpack Configuration Example

const path = require('path');
const CacheBusterPlugin = require('webpack-cache-buster-plugin'); // Import the plugin

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CacheBusterPlugin({
      htmlFilePaths: ['./src/index.html'], // List of HTML files to modify
      filesToCacheBust: ['main.js', 'styles.css'], // List of files to add cache-busting query
    }),
  ],
};

Before and after HTML Example

Before:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>My Game</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

After:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css?v=abc12">
    <title>My Game</title>
</head>
<body>
    <script src="main.js?v=abc12"></script>
</body>
</html>

...a query string with a version code is being added, which forces the browser to fetch the file again.

Package Sidebar

Install

npm i webpack-cache-buster-plugin

Weekly Downloads

0

Version

1.0.5

License

MIT

Unpacked Size

4.68 kB

Total Files

4

Last publish

Collaborators

  • paulplay