Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
string-replace-webpack-plugin
const objectHash = require('node-object-hash');
console.log(objectHash({sort: false}).sort(module.exports));
// Different config content between build 1 and 2
`string-replace-webpack-plugin/loader.js?id=ay3quvgnd7k`
`string-replace-webpack-plugin/loader.js?id=z5o2gtqy17d`
// Build 1 hashed config content
`{context:/Users/zen/Code/webpack/hard-source-string-replace,entry:./index.js,ou
tput:{path:/Users/zen/Code/webpack/hard-source-string-replace/dist,filename:main
.js},module:{rules:[{test:<:RegExp>:/\.js$/,loader:/Users/zen/Code/webpack/hard-
source-string-replace/node_modules/string-replace-webpack-plugin/loader.js?id=ay
3quvgnd7k}]},plugins:[<:HardSourceWebpackPlugin>:[object
Object],<:StringReplacePlugin>:[object Object]]}`
// Build 2 hashed config content
`{context:/Users/zen/Code/webpack/hard-source-string-replace,entry:./index.js,ou
tput:{path:/Users/zen/Code/webpack/hard-source-string-replace/dist,filename:main
.js},module:{rules:[{test:<:RegExp>:/\.js$/,loader:/Users/zen/Code/webpack/hard-
source-string-replace/node_modules/string-replace-webpack-plugin/loader.js?id=z5
o2gtqy17d}]},plugins:[<:HardSourceWebpackPlugin>:[object
Object],<:StringReplacePlugin>:[object Object]]}`
const createHash = require('crypto').createHash;
const nodeObjectHash = require('node-object-hash');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const StringReplacePlugin = require('string-replace-webpack-plugin');
let stringReplacePluginReplaceId = 0;
const secrets = {
web: {
key: 'secret'
},
};
module.exports = {
context: __dirname,
entry: './index.js',
output: {
path: __dirname + '/dist',
filename: 'main.js',
},
module: {
rules: [
{
test: /\.js$/,
loader: StringReplacePlugin.replace({
replacements: [
{
pattern: /\/\* @secret (\w*?) \*\//ig,
replacement: function (match, p1, offset, string) {
return secrets.web[p1];
}
}
]
}),
// StringReplacePlugin doesn't have full webpack >1 support so it won't
// use these options, but the HardSource configHash can. As long as
// these options and the above options are kept up to date with each
// other, the configHash will reflect any changes giving a new cache
// when you need it.
options: {
replacements: [
{
pattern: /\/\* @secret (\w*?) \*\//ig,
replacement: function (match, p1, offset, string) {
return secrets.web[p1];
}
}
]
}
},
]
},
plugins: [
new HardSourceWebpackPlugin({
configHash(webpackConfig) {
let hashContent = nodeObjectHash({sort: false}).sort(webpackConfig);
// Replace StringReplacePlugin ids. The `options` object will also be in
// the hashContent and correctly reflect the StringReplacePlugin
// configuration in the configHash.
hashContent = hashContent.replace(
/(string-replace-webpack-plugin/loader.js?id=)\w+/,
match => {
return match[0] + stringReplacePluginReplaceId++;
}
);
return createHash('sha1').update(hashContent).digest('hex');
}
}),
new StringReplacePlugin(),
]
};
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const StringReplacePlugin = require('string-replace-webpack-plugin');
const secrets = {
web: {
key: 'secret'
},
};
module.exports = {
context: __dirname,
entry: './index.js',
output: {
path: __dirname + '/dist',
filename: 'main.js',
},
module: {
rules: [
{
test: /\.js$/,
loader: StringReplacePlugin.replace({
replacements: [
{
pattern: /\/\* @secret (\w*?) \*\//ig,
replacement: function (match, p1, offset, string) {
return secrets.web[p1];
}
}
]
}),
},
]
},
plugins: [
new HardSourceWebpackPlugin(),
new StringReplacePlugin(),
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.