HtmlCustomHashWebpackPlugin

This is a webpack plugin that works together with another plugin, HtmlWebpackPlugin, to allow you to customize the cache buster parameter for script/style assets.

Why?

HtmlWebpackPlugin can add a cache buster paramter to your style / script tags (when you set hash:true), but there's no way to customize that value:

<script type="text/javascript" src="/dist/bundle.js?7eb5ef5e516e47ad8364"></script>

HtmlCustomHashWebpackPlugin allows you to replace that random value with something specific for your build, for example:

<script type="text/javascript" src="/dist/bundle.js?rc20"></script>

Installation

Install the plugin with npm:

$ npm install html-custom-hash-webpack-plugin --save-dev

Usage

Import the plugin in your webpack.config.js file and configure it with the value that you want for the hash (cache buster) parameter:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlCustomHashWebpackPlugin = require('html-custom-hash-webpack-plugin');
 
module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      inject: 'body'
    }),
    new HtmlCustomHashWebpackPlugin({
      hash: process.env.RC_VERSION
    })
  ]
};

Make sure to not provide a hash:true configuration for HtmlWebpackPlugin.

Contribution

You're free to contribute to this project by submitting issues and/or pull requests.

License

This project is licensed under MIT.