This plugin is for transforming bundle references in your html files with cache friendly filenames using content hashes. It's meant to work side by side with ExtractTextPlugin (when using content hashes). Its main use is for processing css file references. Images should work too, but I haven't tested it. It was made generic enough to handle js bundle references as well, but as of this writing it appears using [contenthash] is not supported for naming js bundles.
Tip: Just use this plugin for your production/staging builds.
$ npm install contenthash-replace-webpack-plugin --save-devconst path = require('path');
const ContentHashReplacePlugin = require('contenthash-replace-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: ['./src/app.js']
},
output: {
path: path.join(__dirname, 'dist/static'),
filename: '[name].js',
publicPath: '/static/',
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ContentHashReplacePlugin({
src: 'index.html',
dest: 'dist/index.html',
files: ['./css/app.css']
format: '[name].[contenthash].[ext]'
}),
new ExtractTextPlugin('[name].[contenthash].css')
]
};<!DOCTYPE html>
<html lang="en">
<head>
<link href="/static/app.css" rel="stylesheet">
</head>
<body>
<script src="/static/app.js"></script>
</body>
</html>require('./app.css');
console.log('hello world!');<!DOCTYPE html>
<html lang="en">
<head>
<link href="/static/app.a92b36339e7f9340ca152593ca9c81ba.css" rel="stylesheet">
</head>
<body>
<script src="/static/app.js"></script>
</body>
</html>