使用前第一步：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使用過程

html-webpack-plugin的使用