作用
简化HTML文件的创建
遇到的问题
1. 在模板中使用 <%= HtmlWebpackPlugin.options.title %> 报错：HtmlWebpackPlugin is undefined
HtmlWebpackPlugin => 首字母小写 htmlWebpackPlugin
2. 配置项
{ plugins: [ new htmlWebpackPlugin({ template: '模板所在目录', title: '生成的HTML文档的标题', filename: '输出的html文件名', inject: 'true |'head'|'body'|false将assets注入template或templateContent', favicon: '将给定的图标路径添加到输出html', minify: '{...} | false传递html-minifier选项对象来缩小输出', hash: 'true | false如果true然后在所有包含的脚本和CSS文件中附加一个唯一的webpack编译哈希。这对于缓存清除非常有用', cache: 'true | falseif true（默认）只有在更改文件时才尝试发出文件。', showErrors: 'true | false如果true（默认）错误的详细信息将被写入HTML页面', chunks: '允许添加的chunk', chunksSortMode: '允许控制如何将批处理包含在html之前进行排序。允许的值：'none'| 'auto'| '依赖'| {function} - 默认值：'auto'', excludeChunks: '允许您跳过一些chunk', xhtml："true | false如果true将link标签渲染为自动关闭，则符合XHTML。默认是false" }) ] }
3. 将js脚本直接以inline的形式插入到htm页面（这样做可以减少http请求）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 直接引入的例子 -->
<script type="text/javascript">
<%= compilation.assets[htmlWebpackPlugin.files.chunks.vendors.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
</script>
</head>
<body>
</body>
</html>