webpack-html-hash-plugin
v0.2.0
Published
automatically replace the html link and script tags, add hash
Downloads
16
Readme
Inline Hash Webpack Plugin
Automatically replace the html link and script tags, add hash
Getting Started
Installation
$ npm i webpack-html-hash-pluginBasic Usage
Step1:
// add hash
output: {
filename: '[name].js?v=[hash:6]',
// or [name].[hash].js
chunkFilename: '[id].js?v=[hash:6]',
// or id].[hash:6].js
},
Step2:
// webpack.config.prod.js
import WebpackHtmlHashPlugin from 'webpack-html-hash-plugin';
//...
plugins: {
new WebpackHtmlHashPlugin({
fileName: 'test.html',
template: 'template/test.html',
encoding: 'GBK'
})
}or
module.exports = {
entry: {
// ...
},
output: {
// ...
},
htmlHashOption: {
fileName: 'test.html',
template: 'template/test.html',
encoding: 'GBK'
}
}templateis requisite, template pathfileNameis not requisite, defaultindex.htmlencodingis not requisite, defaultutf-8
webpack version < 2.0 , use
new WebpackHtmlHashPlugin.default()
template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="root"></div>
<script src="common.js"></script>
<script src="index.js"></script>
</body>
</html>build:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link rel="stylesheet" href="index.css?v=4475fb" />
</head>
<body>
<div id="root"></div>
<script src="common.js?v=4475fb"></script>
<script src="index.js?v=4475fb"></script>
</body>
</html>