html-webpack-plugin supports templating with variables.
You can define the variables in your webpack.config.js
new HtmlWebpackPlugin({
template: './src/index.html',
header: '<h1>hello world</h1>',
fotter: '<b>Footer</b>'
}),
And put them in place in your index.html like so:
<html>
<head></head>
<body>
<%= htmlWebpackPlugin.options.header %>
<!-- all your standard template here -->
<%= htmlWebpackPlugin.options.footer %>
</body>
</html>
To load the header and footer from normal HTML files requires an additional step and we use the built in fs node package for this (you don't have to install it).
let fs = require('fs');
const header = fs.readFileSync(__dirname + '/header.html');
const footer = fs.readFileSync(__dirname + '/footer.html');
module.exports = {
// all of your normal config
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
header: header,
footer: footer,
})
]
});
Now when you run webpack your HTML file will be injected in the positions you specified with the content of your header and footer files.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
