概念
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项目的默认模板作为你自己编写模板的起点。
