find-replace-webpack-plugin

This plugin makes it easy to find and replace strings in your files. It exposes the full stats object from the webpack build in the replace function so you can easily add your new chunkhashes for example.

Install

npm i --save-dev find-replace-webpack-plugin

Usage example

var webpack = require('webpack');
var path = require('path');
var _ = require('lodash');
var FindReplacePlugin = require('find-replace-webpack-plugin');

module.exports = {
	entry: {
		app: './web/assets/src/js/app.js'
	},

	output: {
		filename: '[name].[chunkhash].js',
		path: path.resolve(__dirname, 'web/assets/js')
	},

	plugins: [
		new webpack.optimize.CommonsChunkPlugin({
			name: 'vendor',
			minChunks: function(module) {
				// this assumes your vendor imports exist in the node_modules directory
				return module.context && module.context.indexOf('node_modules') !== -1;
			}
		}),
		new FindReplacePlugin({
			src: 'templates/_layouts/site.html',
			dest: 'templates/_layouts/site.html',
			rules: [
				{
					find: /([^"\/\.]+)(\.?([^"\/\.]*))\.(js|css)/g,
					replace(stats, match, name, dothash, hash, ext) {
						var lookup = _.zipObject(
							_.map(stats.chunks, 'names'),
							_.map(stats.chunks, 'files')
						);
						return lookup[name] || `${name}${dothash}.${ext}`;
					}
				}
			]
		})
	]
}