这个插件用于简化HTML文件的创建，服务于webpack bundles.这对文件名使用hash的打包特别有用。可以用这个插件产生HTML，也可以使用自己的模版。
plugins
这个插件提供了钩子用来扩展需求,下面是一些社区提供的现成的扩展：
- favicons-webpack-plugin : 用来给iOS和andriod以及桌面浏览器产生favicons和icons
- inline-chunk-manifest-html-webpack-plugin: 内联webpack的chunk manifest,默认内联在head 标签中，在head中添加script标签
- html-webpack-inline-svg-plugin: 在hmtl-webpack-plugin生成的html中将svg内联
-
resource-hints-webpack-plugin: 提供资源hints,可以用于更快的加载页面， 使用
<link rel='preload'>和<link rel='prefetch'>
用法
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, '/dist'),
filename: 'index_bundle.js',
},
plugins: [
new HtmlWebpackPlugin(),
],
}
这个配置会生成下面文件 dist/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
webpack产生的CSS资源，比如使用ExtractTextPlugin 提取的CSS会放在html head的 <link> 标签中
配置选项
如果在配置选项中传递hash
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| title | {string} | Webpack App | 产生html的title |
| filename | {string} | 'index.html' | 生成的html文件默认是'index.html' 也可以指定一个子路径(比如 'assets/admin.html') |
| template | {string} | `` | 模版的路径 |
| templateParameters | {bool | object|function} | `` | 允许overwrite模版中的参数 |
| inject | {bool|string} | true | true | 'head' | 'body' | false 将所有的资源插入到给定的template或者templateContent中。当值为 true || 'body'， 所有的js资源将插入的body的最下面。 'head'将scripts放在head中 |
| favicon | {string} | `` | 添加给定的favicon 路径 |
| meta | {object} | {} | 允许插入 meta 标签，比如 meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'} |
| minify | {bool | object} | false | 传递 html-minifier配置对象用来压缩产生的html文件 |
| hash | {bool} | false | 如果为true,这会给所有的scripts和css文件添加一个独一无二的webpack编译hash值，这对清除缓存很有用 |
| cache | {bool} | true | 只有文件发生变化时才生产新的文件 |
| showErrors | {bool} | true | 如果写入html发生了错误，则显示错误 |
| chunks | {any} | ? | 允许只添加部分chunks 比如只添加单元测试chunk |
| chunksSortMode | {string | function} | auto | 允许控制chunks在写入html之前如何被排序，值可能为： 'none' | 'auto' | 'dependency' | 'manual' | {function} |
| excludeChunks | {Array<string>} | `` | 允许跳过添加某些chunks,比如不添加单元测试chunk |
示例：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, '/dist'),
filename: 'index_bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html',
}),
],
}
产生多个HTML文件
多次声明这个插件即可以生成多个HTML文件
{
entry: 'index.js',
output: {
path: path.resolve(__dirname, '/dist'),
filename: 'index_bundle.js',
},
plugins: [
new HtmlWebpackPlugin(), // 产生默认的 index.html
new HtmlWebpackPlugin({ // 产生 test.html
title: 'My App',
filename: 'test.html',
template: 'src/assets/test.html'
}),
],
}
自定义Templates
如果默认产生的HTML不能满足我们的需求，这可以自定义模版，最简单的方式是，定义 template 字段，然后传入一个自定义的HTML文件，html-webpack-plugin 将自动的插入所有需要的CSS， JS ，manifest和favicon文件
plugins: [
new HtmlWebpackPlugin({
title: 'custom template',
// 加载自定义模版(默认使用loadsh加载)
template: 'index.html'
})
]
自定义index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
可以使用其它的loader加载其它模版，比如 pug, hbs,ejs等格式
module: {
loaders: [
{ test: '\.hbs$', loader: 'hanlebars-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'custom template using Handlebars',
// 加载自定义模版(默认使用loadsh加载)
template: 'index.hbs'
})
]
过滤chunks
只包含我们想要的chunks
plugins: [
new HtmlWebpackPlugin({
chunks: ['app']
})
]
可以使用 'excludeChunks' 排除不想要的chunks
plugins: [
new HtmlWebpackPlugin({
excludeChunks: [ 'dev-helper' ]
})
]
网友评论