webpack-cache-buster-plugin
v1.0.5
Published
A simple webpack plugin to add a randomized query string to specified filenames in your HTML files. This is used to force browsers to reload these items - "busting" their cache.
Downloads
190
Maintainers
paulplayReadme
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-devWebpack 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.