htmlWebpackPlugin config
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>
`
})