This Webpack plugin will
- generate contenthash for every file you pass by param 'file';
- rename filename to new one which include hash, format xxx.yyy.[hash].[js|css]
- replace file with new filename in index.html
TODO: Auto inject assets file to index.html with correct meta tag.
You may use some static files in index.html, which are assets under public path.
When these static files changed, user may can't get the updated ones because of browser cache. Containing content hash in filename can avoid the cache issue.
The output is a file whose name contains its content hash:
my-app/build/config.510e9f86.js
sync filename in build/index.html
<script src='https://myapp.com/config.510e9f86.js'></script>
npm install assets-content-hash-plugin
In your webpack config include the plug-in. And add it to your config:
import AssetsContentHashPlugin from 'assets-content-hash-plugin';
// ...
module.exports =function (webpackEnv) {
const isEnvProduction = webpackEnv === 'production';
// ....
plugins: [
isEnvProduction && new AssetsContentHashPlugin({
file: ['config.js', 'common.css']
})
]
}
You can pass the following options:
Required. string or string array. Asset file path.
Optional. index.html
by default.
loader-utils