html-hash-webpack-plugin

A webpack plugin that parse HTML in search of hashable js chunks. The plugin takes the hashed chunks generated by webpack.optimize.CommonsChunkPlugin and parses the HTML to find those chunks and add the hash to the filename.

Installation

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

Usage

In webpack.config.js:

var webpack = require('webpack');
var HtmlHashPlugin = require('html-hash-webpack-plugin');
 
module.exports = {
    /// ... rest of config
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.[chunkhash].js'),
        new HtmlHashPlugin({
            origin: 'src/',
            output: 'public/',
            html_file: 'index.html' // default_
        })
    ]
}
 

So, in the origin file, we'll have:

<script src="js/vendors.js"></script>
<script src="js/main.js"></script>

After running the plugin, we'll get:

<script src="js/vendors.3cf62b347e0f9d19f4ce.js"></script>
<script src="js/main.35b23ebb648a636e45ed.js"></script>

hash numbers are just an example ;-)

MIT License