Created
December 23, 2017 16:53
-
-
Save mzgoddard/c67316bb47e665fc6fa4bcc82fe70a22 to your computer and use it in GitHub Desktop.
string-replace-webpack-plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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]]}` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(), | |
] | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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