webpack常用插件之HtmlWebpackPlugin
1.HtmlWebpackPlugin
使用HtmlWebpackPlugin两大作用：
1为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
2可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
2.插件原理
将 webpack中`entry`配置的相关入口thunk 和`extract-text-webpack-plugin`抽取的css样式 插入到该插件提供的`template`或者`templateContent`配置项指定的内容基础上生成一个html文件，具体插入方式是将样式`link`插入到`head`元素中，`script`插入到`head`或者`body`中。
3.插件使用
varHtmlWebpackPlugin=require(‘html-webpack-plugin‘)
webpackconfig={
...
plugins:[newHtmlWebpackPlugin( { } )]
}
4.配置参数详解
title: 生成html文档标题
filename: 输出文件的名字
template: 本地模版的位置
inject:向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。
1、true或者body：所有JavaScript资源插入到body元素的底部
2、head: 所有JavaScript资源插入到head元素中
3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
favicon：添加特定favicon路径到输出的html文档中，这个同title配置项，需要在模板中动态获取其路径值
hash: true|false是否为静态资源生成唯一hash值
chuck: 允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
excludeChunks: 这个与chunks配置项正好相反，用来配置不允许注入的thunk。
原文地址：https://www.cnblogs.com/yuanjili666/p/11762227.html