這個插件的兩個作用：
-
為html文件中引入的外部資源如
script、link動態添加每次compile后的hash，防止引用緩存的外部文件問題 -
可以生成創建html入口文件，比如單頁面可以生成一個html文件入口，配置N個
html-webpack-plugin可以生成N個頁面入口
安裝使用如下：
一、首先安裝html-webpack-plugin插件
在cmd中打開項目，輸入cnpm install html-webpack-plugin；
二、在webpack-config.js的plugins里面添加 信息，如下圖
然后在cmd中輸入，webpack，即可以在項目文件夾下自動生成index.html。如果報錯，則表示，未安裝html-webpack-plugin插件。
注：不配置任何選項的html-webpack-plugin插件，他會默認將webpack中的entry配置所有入口thunk和extract-text-webpack-plugin抽取的css樣式都插入到文件指定的位置。
三、多頁面配置
對於生成多頁面的情況，在plugins配置多個plugin即可
1 plugins:[ 2 new webpack.BannerPlugin('測試webpack搭建 '), 3 new HtmlWebpackPlugin(), 4 new HtmlWebpackPlugin({ 5 title:'測試webpack', 6 template: 'src/template/index.html', // 源模板文件 7 filename: './index1.html', // 輸出文件【注意：這里的根路徑是module.exports.output.path】 8 showErrors: true, 9 inject: 'body', 10 chunks: ["index"], 11 favicon:"./src/fav.ico", 12 hash:true, 13 minify:{ 14 caseSensitive: false, //是否大小寫敏感 15 removeComments:true, // 去除注釋 16 removeEmptyAttributes:true, // 去除空屬性 17 collapseWhitespace: true //是否去除空格 18 } 19 }), 20 new HtmlWebpackPlugin({ 21 title:'測試webpack', 22 template: 'src/template/index.html', // 源模板文件 23 filename: './index2.html', // 輸出文件【注意：這里的根路徑是module.exports.output.path】 24 showErrors: true, 25 inject: 'body' 26 }) 27 ]
四、使用template模板頁面
增加模板頁面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title><%= htmlWebpackPlugin.options.title %></title> 6 <% for (var css in htmlWebpackPlugin.files.css) { %> 7 <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet"> 8 <% } %> 9 </head> 10 <body> 11 <!-- 測試 --> 12 <div id="app" style=""></div> 13 </body> 14 <script type="text/babel"> 15 </script> 16 </html>
在配置中配置模板頁面
五、自定義增加的js文件
在配置文件中，chunks選項添加對應的內容即可。
對應的內容為entry中的屬性。具體如下圖
六、生成頁面壓縮
配置minify配置項，常用的幾個配置見上圖
七、其他配置項解釋如下
-
title: 生成的HTML模板的title，如果模板中有設置title的名字，則會忽略這里的設置
-
filename: 生成的模板文件的名字
-
關於filename補充兩點：
1、filename配置的html文件目錄是相對於webpackConfig.output.path路徑而言的，不是相對於當前項目目錄結構的。
2、指定生成的html文件內容中的link和script路徑是相對於生成目錄下的，寫路徑的時候請寫生成目錄下的相對路徑。 -
template: 模板來源文件
-
關於template補充幾點：
1、template配置項在html文件使用
file-loader時，其所指定的位置找不到，導致生成的html文件內容不是期望的內容。
2、為template指定的模板文件沒有指定任何loader的話，默認使用ejs-loader。如template: './index.html'，若沒有為.html指定任何loader就使用ejs-loader -
inject: 引入模塊的注入位置；取值有true/false/body/head；true | 'head' | 'body' | false ,注入所有的資源到特定的 template 或者 templateContent 中，如果設置為 true 或者 body，所有的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中。
- true或者body：所有JavaScript資源插入到body元素的底部
2、head: 所有JavaScript資源插入到head元素中
3、false： 所有靜態資源css和JavaScript都不會注入到模板文件中 -
favicon: 指定頁面圖標；
-
minify: {} | false , 傳遞 html-minifier 選項給 minify 輸出。是
html-webpack-plugin中集成的html-minifier，生成模板文件壓縮配置，有很多配置項，可以查看詳細文檔caseSensitive: false, //是否大小寫敏感 collapseBooleanAttributes: true, //是否簡寫boolean格式的屬性如：disabled="disabled" 簡寫為disabled collapseWhitespace: true //是否去除空格 -
hash: 是否生成hash添加在引入文件地址的末尾，類似於我們常用的時間戳，比如最終引入是：
<script type="text/javascript" src="bundle.049424f7d7ea5fa50656.js?049424f7d7ea5fa50656"></script>。這個可以避免緩存帶來的麻煩 -
cache: 是否需要緩存，如果填寫true，則文件只有在改變時才會重新生成
-
showErrors: 是否將錯誤信息寫在頁面里，默認true，出現錯誤信息則會包裹在一個
pre標簽內添加到頁面上 -
chunks: 引入的模塊，這里指定的是entry中設置多個js時，在這里指定引入的js，如果不設置則默認全部引入
-
chunksSortMode: 引入模塊的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
-
excludeChunks: 排除的模塊
-
xhtml: 生成的模板文檔中標簽是否自動關閉，針對xhtml的語法，會要求標簽都關閉，默認false
八、插件事件（引用位置）
不知道你發現沒有，html-webpack-plugin插件在插入靜態資源時存在一些問題：
- 在插入js資源只能插入head或者body元素中，不能一些插入head中，另一些插入body中
- 不支持在html中文件內聯*，例如在文件的某個地方用
<script src="xxx.js?__inline"></script>來內聯外部腳本
為此，有人專門給插件作者提問了這個問題；對此插件作者提供了插件事件，允許其他插件來改變html文件內容。具體的事件如下：
Async（異步事件）:
* html-webpack-plugin-before-html-generation
* html-webpack-plugin-before-html-processing
* html-webpack-plugin-alter-asset-tags
* html-webpack-plugin-after-html-processing * html-webpack-plugin-after-emitSync（同步事件）:
* html-webpack-plugin-alter-chunks這些事件是提供給其他插件使用的，用於改變html的內容。因此，要用這些事件需要提供一個webpack插件。例如下面定義的MyPlugin插件。
function MyPlugin(options) { // Configure your plugin with options... } MyPlugin.prototype.apply = function(compiler) { // ... compiler.plugin('compilation', function(compilation) { console.log('The compiler is starting a new compilation...'); compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) { htmlPluginData.html += 'The magic footer'; callback(null, htmlPluginData); }); }); }; module.exports = MyPlugin;然后，在webpack.config.js文件中配置Myplugin信息：
plugins: [ new MyPlugin({options: ''}) ]注：一個比較全的配置
1 var webpack=require('webpack'); 2 var HtmlWebpackPlugin = require('html-webpack-plugin'); 3 4 module.exports = { 5 devtool: 'eval-source-map', // 還不知有什么用 6 entry: { 7 index:"./src/js/runoob1.js", 8 main:"./src/js/runoob1.js" 9 }, 10 output: { 11 path: __dirname+"/build/web/", //通過HtmlWebpackPlugin插件生成的html文件存放在這個目錄下面 12 filename: "../js/[name].js" //編譯生成的js文件存放到根目錄下面的js目錄下面,如果js目錄不存在則自動創建，相對於path 13 }, 14 module: { 15 loaders: [ 16 { test: /\.css$/, loader: "style-loader!css-loader" } 17 ] 18 }, 19 plugins:[ 20 new webpack.BannerPlugin('測試webpack搭建 '), 21 new HtmlWebpackPlugin(), 22 new HtmlWebpackPlugin({ 23 title:'測試webpack', 24 template: 'src/template/index.html', // 源模板文件 25 filename: './index1.html', // 輸出文件【注意：這里的根路徑是module.exports.output.path】 26 showErrors: true, 27 inject: 'body', 28 chunks: ["index"], 29 favicon:"./src/fav.ico", 30 hash:true, 31 minify:{ 32 caseSensitive: false, //是否大小寫敏感 33 removeComments:true, // 去除注釋 34 removeEmptyAttributes:true, // 去除空屬性 35 collapseWhitespace: true //是否去除空格 36 } 37 }), 38 new HtmlWebpackPlugin({ 39 title:'測試webpack', 40 template: 'src/template/index.html', // 源模板文件 41 filename: './index2.html', // 輸出文件【注意：這里的根路徑是module.exports.output.path】 42 showErrors: true, 43 inject: 'body' 44 }) 45 ] 46 };