概念
HTML Webpack Plugin这是一个webpack插件，它简化了HTML文件的创建，以服务于你的webpack bundle。这对于在文件名中包含哈希的webpack包特别有用，因为文件名会改变每次编译。您可以让插件为您生成一个HTML文件，或者使用lodash模板提供您自己的模板，或者使用您自己的加载器。
安装
针对webpack的版本，需要安装对应不同的版本。
webpack4
npm i --save-dev html-webpack-plugin@4
webpack5
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项目的默认模板作为你自己编写模板的起点。
