webpack：HtmlWebpackPlugin

使用HtmlWebpackPlugin可以重构入口html，动态添加<link>和<script>，在以hash命名的文件上每次编译都会改变hash值

HtmlWebpackPlugin的配置参数如下

名称	类型	默认	描述
title	{String}	Webpack App	设置生成的HTML文件的title标签
filename	{String}	'index.html'	设置生成的HTML文件的名称，支持指定子目录，如：assets/admin.html
template	{String}	``	webpack需要模板的路径。有关详细信息，请参阅文档
templateParameters	{Boolean|Object|Function}	``	允许覆盖模板中使用的参数
inject	{Boolean|String}	true	true || 'head' || 'body' || false将所有资源注入给定template或templateContent。传递true或'body'所有javascript资源将被放置在body元素的底部。'head'将脚本放在head元素中
favicon	{String}	``	将给定的favicon路径添加到输出HTML
meta	{Object}	{}	允许注入meta-tags。例如meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
minify	{Boolean|Object}	true如果mode是'production'，否则false	控制是否以及以何种方式缩小输出。有关详细信息，请参阅下面的缩小。
hash	{Boolean}	false	true然后，如果webpack为所有包含的脚本和CSS文件添加唯一的编译哈希。这对缓存清除非常有用
cache	{Boolean}	true	仅在文件被更改时才发出文件
showErrors	{Boolean}	true	错误详细信息将写入HTML页面
chunks	{?}	?	允许您仅添加一些块（例如，仅添加单元测试块）
chunksSortMode	{String|Function}	auto	允许控制在将块包含到HTML之前应如何对块进行排序。允许的值是'none' | 'auto' | 'dependency' | 'manual' | {Function}
excludeChunks	{Array.<string>}	``	允许您跳过一些块（例如，不添加单元测试块）
xhtml	{Boolean}	false	如果true将link标记渲染为自动关闭（符合XHTML）

这是一个webpack.config.js示例

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackPlugin(), // Generates default index.html
    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}