| name | describe | type | default |
|---|---|---|---|
| favicon | html图标 | string |
'' |
| title | 创建的html的title | string |
'Webpack App' |
| meta | meta标签 | {object} |
{} |
| base | 配置base标签 | object|string|false |
false |
| filename | 创建的html的名字 | string |
'index.html' |
| template | 按照哪个模板创建html | 路径 | 'src/index.ejs'有就是这个，没有就是普通html模板 |
| templateContent | 作用和template一样，且不能同时使用 | string|Function|false |
false |
| inject | 是否允许自动把打包后的js引入html，引入到什么位置 | head|body|boolen |
true，当未true时根据scriptLoading将其添加到head/body |
| publicPath | 引入打包后的js使用的相对路径，有的时候我们需要绝对路径，可以在这里设置 | 'auto'|string |
'auto' |
| scriptLoading | 选择js加载模式阻塞/延迟（现代浏览器才支持） | 'blocking'|'defer' |
'defer' |
meta栗子
meta: {
'theme-color': '#4285f4'，
'set-cookie': {
'http-equiv': 'set-cookie',
content: 'name=value; expires=date; path=url'
}
}
导报结果如下：
<meta name="theme-color" content="#4285f4">
<meta http-equiv="set-cookie" content="value; expires=date; path=url">
base栗子
'base': 'http://example.com/some/'
'base': {
'href': 'http://example.com/some/',
'target': '_blank'
}
效果：
<base href="http://example.com/some/" target="_blank" />
publicPath栗子
// 一般打包引入js / css
<script src="bundle.js"></script>
<link href="bundle.css" />
// 有的时候需要绝对路径
publicPath: 'http://xxxx.com'
打包后：
<script src="http://xxxx.com/bundle.js"></script>
<link href="http://xxxx.com/bundle.css" />
template和templateContent的区别
- template是路径指定的静态html文件
- templateContent可以是动态生成，eg：
new HtmlWebpackPlugin({
templateContent: `
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
`
})
或者
new HtmlWebpackPlugin({
inject: false,
templateContent: ({htmlWebpackPlugin}) => `
<html>
<head>
${htmlWebpackPlugin.tags.headTags}
</head>
<body>
<h1>Hello World</h1>
${htmlWebpackPlugin.tags.bodyTags}
</body>
</html>
`
})