概念
HTML Webpack Plugin这是一个webpack插件，它简化了HTML文件的创建，以服务于你的webpack bundle。这对于在文件名中包含哈希的webpack包特别有用，因为文件名会改变每次编译。您可以让插件为您生成一个HTML文件，或者使用lodash模板提供您自己的模板，或者使用您自己的加载器。
安装
针对webpack的版本，需要安装对应不同的版本。
webpack4
npm i --save-dev html-webpack-plugin@4webpack5
npm i --save-dev html-webpack-plugin使用
这个插件会为你生成一个HTML5文件，其中包含了使用script标签的所有webpack的bundle。
只需将插件添加到webpack配置中，如下所示：
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: "./src/index.js",
output: {
filename:"index_bundle.js",
path: path.resolve(__dirname,"dist")
},
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入口点，它们都将与script标签一起包含在生成的HTML中。
如果你在webpack的输出中有任何CSS资产(例如，用mini-css-extract-plugin提取的CSS)，那么这些将包含在HTML头部的标签中。
如果你有使用它的插件，html-webpack-plugin应该在任何集成插件之前。
选项
你可以传递一个配置选项到html-webpack-plugin。允许的值如下：
- title
类型：String
默认值：Webpack App
描述：要用于生成的HTML文档的标题。
- filename
类型：String或Function
默认值：index.html
描述：要写入HTML的文件的文件名。默认为index.html。您也可以在这里指定一个子目录(例如:assets/admin.html)。占位符[name]将被条目名称替换。也可以是一个函数，例如(entryName) => entryName + ‘.html’。
- template
类型：String
默认值：空
描述：默认情况下，它将使用src/index.ejs(如果存在的话)。
- templateContent
类型：string|Function|false
默认值：false
描述：可以用来代替模板提供一个内联模板。
- templateParameters
类型：Boolean|Object|Function
默认值：false
描述：允许覆盖模板中使用的参数。
- inject
类型：Boolean|String
默认值：true
描述：true || ‘head’ || ‘body’ || false将所有资产注入到给定的模板或templateContent中。当传递’body’时，所有javascript资源将被放置在body元素的底部。’head’将把脚本放置在head元素中。设置为true时，将根据scriptLoading选项，决定是把脚本添加到head还是body中。使用false禁用自动注入。
- publicPath
类型：String|’auto’
默认值：auto
描述：publicPath属性值用于script和link 标签。
- scriptLoading
类型：blocking|defer
默认值：defer
描述：现代浏览器支持非阻塞javascript加载(“defer”)，以提高页面启动性能。
- favicon
类型：String
默认值：空
描述：将给定的图标路径添加到输出的HTML中。
- meta
类型：Object
默认值：{}
描述：允许注入meta标签。例如:meta: {viewport: ‘width=device-width, initial-scale=1, shrink-to-fit=no’}。
- base
类型：Object|String|false
默认值：false
描述：注入一个base标签。如base:“
https://example.com/path/page.html
- minify
类型：Boolean|Object
默认值：如果mode为’production’则为true，否则为false
描述：控制是否以及以何种方式压缩输出。
- hash
类型：Boolean
默认值：false
描述：如果为true，则附加一个唯一的webpack编译哈希到所有包含的脚本和CSS文件。这对于缓存销毁是很有用的
- cache
类型：Boolean
默认值：true
描述：只有当文件被更改时，才会删除它。
- showErrors
类型：Boolean
默认值：true
描述：错误的详细信息将写入HTML页面。
- chunks
类型：?
默认值：?
描述：只允许添加一些chunk(例如：只添加unit-test 的chunk)
- chunksSortMode
类型：String|Function
默认值：auto
描述：允许控制块在包含到HTML之前应该如何排序。允许的值是’none’ | ‘auto’ | ‘manual’ | {Function}。
- excludeChunks
类型：Array.<string>
默认值：空
描述：允许你跳过一些chunk(例如不添加unit-test 的chunk)。
- xhtml
类型：Boolean
默认值：false
描述：如果为true，则将link标签呈现为自动关闭(XHTML兼容)
下面是一个webpack配置示例，演示了如何使用这些选项：
{
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
]
}生成多个HTML文件
要生成多个HTML文件，请在插件数组中多次声明插件。
配置示例：
{
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
}编写模板
如果默认生成的HTML不能满足您的需要，您可以提供自己的模板。最简单的方法是使用template选项并传递一个定制的HTML文件。html-webpack-plugin会自动将所有必需的CSS, JS, manifest和favicon文件注入到标记中。
配置文件的部分内容：
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
// Load a custom template (lodash by default)
template: 'index.html'
})
]模板文件index.html的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>如果您已经有一个模板加载器，您可以使用它来解析模板。请注意，如果您指定了html加载器并使用.html文件作为模板，也会发生这种情况。
module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars-loader" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
template: 'index.hbs'
})
]您可以使用现成的lodash语法。如果inject特性不适合你的需要，而你又想完全控制资产的位置，可以使用html-webpack-template项目的默认模板作为你自己编写模板的起点。
