原理
插件的基本作用就是生成html文件，原理很簡單：
將 webpack 中 entry 配置的相關入口 chunk 和 extract-text-webpack-plugin 抽取的 css 樣式 插入到該組件提供的 template 或者 templateContent 配置項指定的內容基礎上生成一個 html 文件，具體插入方式是將樣式 link 插入到 head 元素中， script 插入到 head 或者 body 中。
實例化該插件可以不配置任何參數：
const htmlWebpackPlugin=require('html-webpack-plugin');
webpackConfg={
...
plugins:[
...
new htmlWebpackPlugin();
]
}
不配置任何選項的 html-webpack-plugin 插件，他會默認將webpack中的entry配置所有入口thunk和extract-text-webpack-plugin抽取的css樣式都插入到指定的位置。
配置項：
title
生成的html文檔的標題。配置該項，它並不會替換指定模板文件中的title元素的內容，除非html模板文件中使用了模板引擎語法來獲取改配置項值，如下ejs模板語法形式：
<title>{%= o.htmlWebpacPlugin.options.title %}</title>
filename
輸出文件的文件名稱，默認為index.html,不配置就是該文件名；此外，還可以為輸出文件指定目錄位置，例如html/index.html
filename配置的html文件目錄是相對於webpackConfig.output.path路徑而言的，不是相對於當前項目目錄結構的。
指定生成的html文件內容中的link 和 script 路徑是相對於生成目錄下的寫路徑的時候請寫生成目錄下的相對路徑。
template
本地模板文件的位置，支持加載器(handlebars ejs undersore html等)
template配置項在html文件使用file-loader時，其所指定的位置找不到，導致生成的html文件內容不是期望的內容。
為template指定的模板文件沒有指定任何loader的話，默認使用ejs-loader。
templateContent
可以指定模板的內容，不能與template共存。
inject
向template或者templateContent中注入所有靜態資源，不同的配置值注入的位置不經相同。
1 true/body 所有js資源插入到body元素的底部
2 head: 所有的js資源插入到head元素中
3 false 所有的靜態資源css和js都不會注入到模板文件中
favicon
添加特定favicon路徑到輸出的html文檔中，這個同title配置項，需要在模板中動態獲取其路徑值
hash
true|false,是否為所有注入的靜態資源添加webpack每次編譯生成的唯一hash值，
chunks
允許插入到模板中的一些chunk，不配置此項默認會將entry中所有的thunk注入到模板中，在配置多個頁面時，每個頁面注入的thunk應該時不相同的，需要通過該配置為不同頁面注入不同的thunk。
excludeChunks
這個與chunks配置項正好相反
chunksSortMode
none|auto|function，默認auto；允許指定的thunk在插入到html文檔前進行排序
配置多個html頁面
需要實例化該插件多次
... plugins: [ new HtmlWebpackPlugin({ template: 'src/html/index.html', excludeChunks: ['list', 'detail'] }), new HtmlWebpackPlugin({ filename: 'list.html', template: 'src/html/list.html', thunks: ['common', 'list'] }), new HtmlWebpackPlugin({ filename: 'detail.html', template: 'src/html/detail.html', thunks: ['common', 'detail'] }) ] ...
如上例應用中配置了三個入口頁面，index.html list.html detail.html,並且每個頁面注入的thunk不盡相同；類似如果多頁面應用，就需要為每個頁面配置一個；
配置自定義模板
不帶參數的 html-webpack-plugin 默認生成的html文件只是將thunk 和css 樣式插入到文檔中，可能不能滿足我們的要求，，對於多頁面應用，如果每個頁面的模板文件不同，可以直接使用默認配置，，但是在項目中，可能所有的頁面的模板文件可以共用一個模板，因為 html-webpack-plugin 插件支持不同的模板loader，所以結合模板引擎來公用一個模板文件有了可能。
這時，配置自定義模板就派上用場了。具體的用法，借助模板引擎 來實現，例如插件沒有設置loader時支持的ejs模板引擎，下面就以ejs模板引擎為例來說明；
例如項目中有2個入口html頁面，它們可以公用一個模板文件，利用ejs模板的語法來動態插入各自頁面的thunk和css樣式，代碼可以這樣：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%= htmlWebpackPlugin.options.title %></title></title> <% for(var css in htmlWebpackPlugin.files.css){ %> <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel='stylesheet'> <% } %> <link> </head> <body> <div id='app'></div> <% for(var chunk in htmlWebpackPlugin.files.chunks) {%> <script type='text/script' src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script> <% } %> </body> </html>
自定義模板上下文數據
html-webpack-plugin 在生成html文件的過程中，插件會根據配置生成一個對當前模板可用的特定數據，模板語法可以根據這些數據來動態生成html文件的內容。模板引擎具體可以訪問的數據如下：
var templateParams={ compilation:compilation, webpack:compilation.getStats().toJson(), webpackConfig:compilation.options, htmlWebpackPlugin:{ files:assets, options:self.options } }
從中可以看出，有四個住喲啊的對象數據。其中 compilation 為所有webpack插件提供的都可以訪問的一個編譯對象
webpackConfig
webpack的配置項；通過這個屬性可以獲取webpack的相關配置項，如通過 webpackConfig.output.publicPath來獲取publicPath配置，當然也可以獲取其他配置內容
htmlWebpackPlugin
html-webpack-plugin插件對應的數據：
htmlWebpackPlugin.files:次html-webpack-plugin插件配置的chunk和抽取的css樣式。該files值其實是webpack的stats對象的assetsByChunkName屬性代表的值，該值是插件配置的chunk塊對應的按照webpackConfig.output.filename映射的值。
參考：https://www.cnblogs.com/wonyun/p/6030090.html