html-webpack-alter-plugin
A plugin can alter the template when using html-webpack-plugin.
Installation
npm i --save-dev html-webpack-alter-pluginUsage
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackAlterPlugin = require('html-webpack-alter-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackAlterPlugin({
position: 'head',
content: [
{
type: 'script',
data: 'window.__MY_GLOBAL__={ name: "xiao ming", age: 18 };',
},
{
type: 'style',
data: '.red-text { color: red; }',
}
]
}),
],
};npm run build and you will get the html file like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
<script type="text/javascript">window.__MY_GLOBAL__={name:"xiao ming",age:18}</script><style>.red-text{color:red}</style>
</head>
</head>
<body>
</body>
</html>Options
| option | type | value |
|---|---|---|
| position | string | 'head'/'body' |
| content | array | { type: 'script'/'style', data } |