html-webpack-plugin文档
安装
npm i -D html-webpack-plugin
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| title | String | Webpack App | 用于生成html的head.title |
| filename | String | index.html | 默认输出的文件名,可以自定义,如: "dist/demo.html" |
| template | String | '' | 文件相对于webpack配置的路径(绝对或相对),默认值是: "src/index.ejs"(如果存在) |
| templateContent | string/Function/false | false | 提供html模板,将此模板替换到输出的html文件里 |
| templateParameters | Boolean/Object/Function | false | 允许将指定的内容替换为自定义的内容 |
| inject | Boolean/String | true | 取值范围:true/'head'/'body'/false,true或'body':表示追加到html.body末尾,'head':表示注入到html.head中,false表示禁用 |
| scriptLoading | blocking/defer | blocking | 现代浏览器加载js的方式,使用defer来提高页面启动性能。 |
| favicon | String | '' | 配置favicon路径,来输出到html |
| meta | Object | {} | 允许注入mete元信息. |
| base | Object/String/false | false | 注入基本tag. 如:base:"https://example.com/path/page.html
|
| minify | Boolean/Object | 生产模式:true,其他模式:false | 控制以何种方式来压缩输出。false表示不压缩 |
| hash | Boolean | false | 通过hash方式来减小缓存影响 |
| cache | Boolean | true | 是否启用缓存 |
| showErrors | Boolean | true | 编译出错时是否将错误信息写入到输出的html |
| chunk | ? | ? | 细化chunk配置 |
| chunksSortMode | String/Function | auto | 配置chunk输出到html前的排序规则. 取值范围:'none'/ 'auto' / 'manual'/ Function
|
| excludeChunks | Array.<string> | `` | 设置chunk的排除规则 |
| xhtml | Boolean | false | 是否开启标签自闭合 |
单页面示例配置
{
...
plugins: [new HtmlWebpackPlugin()]
...
}
多页面示例配置
{
...
plugins: [
new HtmlWebpackPlugin({ // 默认页面
filename: 'index.html',
template: 'src/assets/index.html'
}),
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
...
}
webpack多页应用配置
摘录一些常用的属性说明:
-
title
webpack.config.js
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
index.html
<html>
...
<title><%= htmlWebpackPlugin.options.title %></title>
...
</html>
输出
<html>
...
<title>My App</title>
...
</html>
-
filename
配置输出html的名称和路径.
1 如果不指定路径,html将直接output.path配置的路径下,如: ('./build'目录)
2 指定路径后将会输出到output.path下,并创建相应目录,如:
const {resolve} = require('path')
module.exports = {
output: {
filename: 'build.js', // 输出文件名
path: resolve(__dirname, 'build') // 输出路径
},
...
plugins:[
new HtmlWebpackPlugin({
filename:'assets/index.html'
})
]
...
}
将会输出到
./build/asstes/index.html
-
template
根据指定模板编译输出内容到目标html
伪代码如下:
const {resolve} = require('path');
module.exports = {
...
plugins:[
new HtmlWebpackPlugin({
...
path: 'index.html',
template: resolve(__dirname,'../src/index.html'),
...
})
]
}
-
templateContent
1 以html字符串的方式代替template模板
2templateContent优先级高于template,当templateContent与template配置同时存在时,以templateContent为准.
const {resolve} = require('path');
module.exports = {
...
plugins:[
new HtmlWebpackPlugin({
...
path: 'index.html',
templateContent: ({htmlWebpackPlugin}) => `
<html>
<head>
${htmlWebpackPlugin.tags.headTags}
</head>
<body>
<h1>Hello World</h1>
${htmlWebpackPlugin.tags.bodyTags}
</body>
</html>
`,
...
})
]
}
-
inject
配置将一些内容输出到html文档的什么位置: head或body
1 true或'body'时输出到 html.body
2 'head'时输出到 html.head
3 false时不会输出
-
scriptLoading
设置<script>标签加载js的方式
1 'blocking': 默认模式,会阻塞页面加载,直到加载完成
2 'defer': 延迟加载,需要根据"加载的js是否会改变html文档"的原则来添加
-
meta
赋予配置添加meta的能力
plugins: [
new HtmlWebpackPlugin({
'meta': {
// 生成: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',
// 生成: <meta name="theme-color" content="#4285f4">
'theme-color': '#4285f4'
}
})
]
plugins: [
new HtmlWebpackPlugin({
'meta': {
// 生成: <meta http-equiv="Content-Security-Policy" content="default-src https:">
// 等价于这个 http header: `Content-Security-Policy: default-src https:`
'Content-Security-Policy': { 'http-equiv': 'Content-Security-Policy', 'content': 'default-src https:' },
// 生成: <meta http-equiv="set-cookie" content="value; expires=date; path=url">
// 等价于这个 http header: `set-cookie: value; expires=date; path=url`
'set-cookie': { 'http-equiv': 'set-cookie', content: 'name=value; expires=date; path=url' },
}
})
]
-
minify
1 在生产环境(
mode = 'production')默认开启(true),可以不配置minify属性即可使用,但是如果想要自定义,需要显示定义HtmlWebpackPlugin.minify属性
2 非生产环境下,也可以通过下面的配置来进行自定义配置
minify: {
collapseWhitespace: true, // 是否去除空白字符,包括空格和换行符
removeComments: true, // 是否移除注释
removeRedundantAttributes: true, // 去除冗余属性
removeScriptTypeAttributes: true, // 去除script类型属性
removeStyleLinkTypeAttributes: true, // 去除style和link类型属性
useShortDoctype: true //
}
-
chunk + excludeChunks
1 chunk: 设置要打包的模块
2 excludeChunks 设置排除的模块
伪代码如下:
chunks: ['app']
excludeChunks: [ 'dev-helper' ]
-
chunksSortMode
网友评论