HtmlWebpackPlugin
说明
插件的基本作用就是生成 html 文件。原理很简单：
将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式
插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件，
具体插入方式是将样式link插入到head元素中，script插入到head或者body中。
实例化该插件时可以不配置任何参数，例如下面这样：
var HtmlWebpackPlugin = require('html-webpack-plugin')
webpackconfig = {
...
plugins: [
new HtmlWebpackPlugin()
]
}
HtmlWebpackPlugin
HtmlWebpackPlugin 简化了 HTML 文件的创建，
以便为你的 webpack 包提供服务。
这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个 HTML 文件，使用 lodash 模板提供你自己的模板，或使用你自己的 loader。
安装
npm install --save-dev html-webpack-plugin
基本用法
该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。 只需添加插件到你的 webpack 配置如下：
var HtmlWebpackPlugin = require('html-webpack-plugin');
var 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 入口点， 他们都会在生成的 HTML 文件中的 script 标签内。
如果你有任何 CSS assets 在 webpack 的输出中（例如， 利用 MiniCssExtractPlugin 提取 CSS）， 那么这些将被包含在 HTML head 中的标签内。
配置
获取所有的配置选项。
| 属性名 | 字段类型 | 默认值 | 说明 |
|---|---|---|---|
| title | String | Webpack App | 网页 document.title 的配置 |
| filename | String | index.html | html 文件生成的名称，可以使用 assets/index.html 来指定生成的文件目录和文件名, 重点1:生成文件的跟路径为ouput.path的目录。 重点2: ‘assets/index.html’ 和 ./assets/index.html 这两种方式的效果时一样的， 都是在 output.path 目录下生成 assets/index.html |
| template | String | 空 | 生成 filename 文件的模版， 如果存在 src/index.ejs， 那么默认将会使用这个文件作为模版。 重点：与 filename 的路径不同， 当匹配模版路径的时候将会从项目的跟路径开始 |
| templateParameters | Boolean|Object|Function | 空 | 覆盖默认的模版中使用的参数 |
| inject | Boolean|String | true | 制定 webpack 打包的 js css 静态资源插入到 html 的位置， 为 true 或者 body 时， 将会把 js 文件放到 body 的底部， 为 head 时， 将 js 脚本放到 head 元素中。 |
| favicon | String | 空 | 为生成的 html 配置一个 favicon |
| mete | Object | {} | 为生成的 html 文件注入一些 mete 信息， 例如： {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'} |
| base | Object|String|false | false | 在生成文件中注入 base 标签， 例如 base: "https://example.com/path/page.html <base> 标签为页面上所有的链接规定默认地址或默认目标 |
| minify | Boolean|Object | 如果 mode 设置为 production 默认为 true 否则设置为 false |
设置静态资源的压缩情况 |
| hash | Boolean | false | 如果为真，则向所有包含的 js 和 CSS 文件附加一个惟一的 webpack 编译散列。这对于更新每次的缓存文件名称非常有用 |
| cache | Boolean | true | 设置 js css 文件的缓存，当文件没有发生变化时， 是否设置使用缓存 |
| showErrors | Boolean | true | 当文件发生错误时， 是否将错误显示在页面 |
| xhtml | Boolean | false | 当设置为 true 的时候，将会讲 <link> 标签设置为符合 xhtml 规范的自闭合形式 |
第三方插件
这个插件支持第三方插件。详细列表参阅文档。
更多 HTML 搜索
通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容，可以知道他们实际工作使用了什么技术或者什么地方薄弱；
你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容；
注：这里仅收录了常见搜索，并不是无论搜索什么都记录在里面的；
如果你是为了面试做准备的，那么推荐你查看 HTML面试题，这里基本包涵了市场上的所有 HTML 方面的面试题，让你更加牢固的掌握 HTML 知识
