html-webpack-plugin的使用

　　　　使用前第一步：npm install 安装html-webpack-plugin --save--dev || --save  (tips:--save--dev跟--save最大的区别就是--dev安装是为了仅仅在develop开发环境所依赖的，线上运行并不需要安装也能运行的依赖)，献上webpack中文文档地址：=》http://www.jqhtml.com/7626.html

next=>安装完之后需要在webpack配置文件webpack.base.config中引用该依赖,exp:var htmlWebpackPlugin=required ('html-webpack-plugin'),引入之后可以在配置中的plugins属性中new一个htmlWebpackPlugin({})后使用命令npm run  webpack会发现生成了一个html模板，证明插件使用成功了。

　　　　接下来便是webpack配置中的plugins选项new 出来的htmlWebpackPlugin的参数介绍了：

　　　　　　1）：可以通过template属性指定webpack打包后的输出模板文件：=》template:index.html这样子便会把入口的Index.html文件单做模板来打包输出。

　　　　　　2）：可以通过filename属性指定输出文件名：=》filename:'index-[hash].html'指定文件名index+哈希值。(tips:chunkHash跟hash的最大区别是hash代表compliation的哈希值，而compliation对象会　　　　　　在任何一个要被打包的文件被改动后重新生成，也就是说单独修改一个文件会影响整个文件的compliation对象的重构，这样子打包后原来的未经改动的文件缓存也就会被新生成 的打包文件所覆　　　　　　　盖，而chunkHash则会是根据具体模块文件的内容计算所得的hash值，任何一个文件的更改只会影响到它本身的哈希值，并不会对其它文件哈希值造成影响，两者是独立的。本内容参见　　　　　　　　　　http://www.cnblogs.com/ihardcoder/p/5623411.html)。

　　　　　　3）：可以通过inject属性指定打包输出的模板内容嵌入的位置：=》inject:'body'这样子便会把输出 的内容嵌入到body标签内

　　　　　　4）：可以通过title属性可自定义标题名，并在模板中通过<%= htmlWebpackPlugin.options.title%>来引用到title的值并在打包后的文件中输出。

　　　　　　5）：data属性同上。

　　　　　　6）：可以在模板文件中使用<% for (var key in htmlWebpackPlugin) {%><%=key%><%}%>在打包文件中输出failes跟options两个对象，同时也可以以同样方式分别输出两个对象的所有值。

　　　　　　7）：可以在模板文件中使用<script src="<%=htmlWebpackPlugin.chunks.main.entry%>"></script>在打包文件中引用入口entry中的main.js文件

　　　　　　8）：可以通过minify属性对输出后的文件进行压缩：=》removeComments:true//删除备注------其它minify属性参考webpack文档

　　　　　　9）：多页面进行打包时需要在entry中指定多个html页面目录并创建多个对应的htmlWebpackPlugin,并可自定义其它属性名称来达到通过输出模板文件对该属性进行引用的目的

　　　　　　10）：多页面打包时可以通过chunks属性指定需要引入的entry中的js文件路径

　　　　　　11）：多页面打包时可以通过excludeChunks属性排除该属性指定的entry中的js文件路径

　　　　　　12）：webpack的compilation对象中的assets[]方法接收去除publicPath(线上地址)后的文件路径，并通过source()方法将公用文件main直接写入到打包输出后的html文件中，这样可以大大提高　　　　　　　　　　wepack打包效率=》<%=compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source%>，其它外链的js文件可以在模板文件中循　　　　　　　　环除了公用文件main.js的所有files对象中的chunk对象的每一个js文件名对应的entry目录，并通过script标签引入文件：

　　　　　　　　　　<%for(var k in htmlWebpackPlugin.files.chunks){%>

　　　　　　　　　　　　<%if(k!='main'){%>

　　　　　　　　　　　　　　<script src="<%=htmlWebpackPlugin.files.chunks[k].entry%>" type="text/javascript"></script>

　　　　　　　　　　　　<%}%>

　　　　　　　　　　<%}%>

　　　　　　　　最后run 一次webpack就可以看到嵌入的main的内容以及外链的其它js文件

　　　　　　　　以上就是htmlWebpackPlugin使用过程