引言
最近在react項(xiàng)目中初次用到了html-webapck-plugin插件叁征，用到該插件的兩個(gè)主要作用：
為html文件中引入的外部資源如script纳账、link動(dòng)態(tài)添加每次compile后的hash，防止引用緩存的外部文件問題
可以生成創(chuàng)建html入口文件捺疼，比如單頁面可以生成一個(gè)html文件入口疏虫，配置N個(gè)html-webpack-plugin可以生成N個(gè)頁面入口
有了這種插件，那么在項(xiàng)目中遇到類似上面的問題都可以輕松的解決啤呼。
在本人項(xiàng)目中使用html-webpack-plugin卧秘，由于對(duì)該插件不太熟悉，開發(fā)過程中遇到這樣或者那樣的問題官扣，下面就來說說這個(gè)插件翅敌。
html-webpack-plugin
插件的基本作用就是生成html文件。原理很簡單：
將 webpack中`entry`配置的相關(guān)入口thunk? 和`extract-text-webpack-plugin`抽取的css樣式? 插入到該插件提供的`template`或者`templateContent`配置項(xiàng)指定的內(nèi)容基礎(chǔ)上生成一個(gè)html文件惕蹄，具體插入方式是將樣式`link`插入到`head`元素中蚯涮，`script`插入到`head`或者`body`中。
實(shí)例化該插件時(shí)可以不配置任何參數(shù)卖陵，例如下面這樣：
varHtmlWebpackPlugin=require('html-webpack-plugin')? ? webpackconfig={...plugins:[newHtmlWebpackPlugin()? ? ]}
不配置任何選項(xiàng)的html-webpack-plugin插件遭顶，他會(huì)默認(rèn)將webpack中的entry配置所有入口thunk和extract-text-webpack-plugin抽取的css樣式都插入到文件指定的位置。例如上面生成的html文件內(nèi)容如下：
Webpack App
當(dāng)然可以使用具體的配置項(xiàng)來定制化一些特殊的需求赶促，那么插件有哪些配置項(xiàng)呢液肌？
html-webpack-plugin配置項(xiàng)
插件提供的配置項(xiàng)比較多，通過源碼可以看出具體的配置項(xiàng)如下：
this.options=_.extend({template:path.join(__dirname,'default_index.ejs'),filename:'index.html',hash:false,inject:true,compile:true,favicon:false,minify:false,cache:true,showErrors:true,chunks:'all',excludeChunks:[],title:'Webpack App',xhtml:false},options);
title: 生成的html文檔的標(biāo)題鸥滨。配置該項(xiàng)嗦哆，它并不會(huì)替換指定模板文件中的title元素的內(nèi)容，除非html模板文件中使用了模板引擎語法來獲取該配置項(xiàng)值婿滓，如下ejs模板語法形式：
{%= o.htmlWebpackPlugin.options.title %}
filename：輸出文件的文件名稱老速，默認(rèn)為index.html，不配置就是該文件名凸主；此外橘券，還可以為輸出文件指定目錄位置（例如'html/index.html'）
關(guān)于filename補(bǔ)充兩點(diǎn)：
1、filename配置的html文件目錄是相對(duì)于webpackConfig.output.path路徑而言的卿吐，不是相對(duì)于當(dāng)前項(xiàng)目目錄結(jié)構(gòu)的旁舰。
2、指定生成的html文件內(nèi)容中的link和script路徑是相對(duì)于生成目錄下的嗡官，寫路徑的時(shí)候請(qǐng)寫生成目錄下的相對(duì)路徑箭窜。
template: 本地模板文件的位置，支持加載器(如handlebars衍腥、ejs磺樱、undersore纳猫、html等)，如比如handlebars!src/index.hbs竹捉；
關(guān)于template補(bǔ)充幾點(diǎn)：
1芜辕、template配置項(xiàng)在html文件使用file-loader時(shí)，其所指定的位置找不到块差，導(dǎo)致生成的html文件內(nèi)容不是期望的內(nèi)容侵续。
2、為template指定的模板文件沒有指定任何loader的話憨闰，默認(rèn)使用ejs-loader询兴。如template: './index.html'，若沒有為.html指定任何loader就使用ejs-loader
templateContent: string|function起趾，可以指定模板的內(nèi)容，不能與template共存警儒。配置值為function時(shí)训裆，可以直接返回html字符串，也可以異步調(diào)用返回html字符串蜀铲。
inject：向template或者templateContent中注入所有靜態(tài)資源边琉，不同的配置值注入的位置不經(jīng)相同。
1记劝、true或者body：所有JavaScript資源插入到body元素的底部
2变姨、head: 所有JavaScript資源插入到head元素中
3、false： 所有靜態(tài)資源css和JavaScript都不會(huì)注入到模板文件中
favicon: 添加特定favicon路徑到輸出的html文檔中厌丑，這個(gè)同title配置項(xiàng)定欧，需要在模板中動(dòng)態(tài)獲取其路徑值
hash：true|false，是否為所有注入的靜態(tài)資源添加webpack每次編譯產(chǎn)生的唯一hash值怒竿，添加hash形式如下所示：
html? ?
chunks：允許插入到模板中的一些chunk砍鸠，不配置此項(xiàng)默認(rèn)會(huì)將entry中所有的thunk注入到模板中。在配置多個(gè)頁面時(shí)耕驰，每個(gè)頁面注入的thunk應(yīng)該是不相同的爷辱，需要通過該配置為不同頁面注入不同的thunk；
excludeChunks: 這個(gè)與chunks配置項(xiàng)正好相反朦肘，用來配置不允許注入的thunk饭弓。
chunksSortMode: none | auto| function，默認(rèn)auto媒抠； 允許指定的thunk在插入到html文檔前進(jìn)行排序弟断。
>function值可以指定具體排序規(guī)則；auto基于thunk的id進(jìn)行排序领舰；none就是不排序
xhtml: true|fasle, 默認(rèn)false夫嗓；是否渲染link為自閉合的標(biāo)簽迟螺，true則為自閉合標(biāo)簽
cache: true|fasle, 默認(rèn)true； 如果為true表示在對(duì)應(yīng)的thunk文件修改后就會(huì)emit文件
showErrors: true|false舍咖，默認(rèn)true矩父；是否將錯(cuò)誤信息輸出到html頁面中。這個(gè)很有用排霉，在生成html文件的過程中有錯(cuò)誤信息窍株，輸出到頁面就能看到錯(cuò)誤相關(guān)信息便于調(diào)試。
minify: {....}|false攻柠；傳遞 html-minifier 選項(xiàng)給 minify 輸出球订，false就是不使用html壓縮。
下面的是一個(gè)用于配置這些屬性的一個(gè)例子：
newHtmlWebpackPlugin({title:'rd平臺(tái)',template:'entries/index.html',// 源模板文件filename:'./index.html',// 輸出文件【注意：這里的根路徑是module.exports.output.path】showErrors:true,inject:'body',chunks:["common",'index']})
配置多個(gè)html頁面
html-webpack-plugin的一個(gè)實(shí)例生成一個(gè)html文件瑰钮，如果單頁應(yīng)用中需要多個(gè)頁面入口冒滩，或者多頁應(yīng)用時(shí)配置多個(gè)html時(shí)，那么就需要實(shí)例化該插件多次浪谴；
即有幾個(gè)頁面就需要在webpack的plugins數(shù)組中配置幾個(gè)該插件實(shí)例：
...? ? plugins:[newHtmlWebpackPlugin({template:'src/html/index.html',excludeChunks:['list','detail']}),newHtmlWebpackPlugin({filename:'list.html',template:'src/html/list.html',thunks:['common','list']}),newHtmlWebpackPlugin({filename:'detail.html',template:'src/html/detail.html',thunks:['common','detail']})? ? ]? ? ...
如上例應(yīng)用中配置了三個(gè)入口頁面：index.html开睡、list.html、detail.html苟耻；并且每個(gè)頁面注入的thunk不盡相同篇恒；類似如果多頁面應(yīng)用，就需要為每個(gè)頁面配置一個(gè)凶杖；
配置自定義的模板
不帶參數(shù)的html-webpack-plugin默認(rèn)生成的html文件只是將thunk和css樣式插入到文檔中胁艰，可能不能滿足我們的需求；
另外智蝠，如上面所述腾么，三個(gè)頁面指定了三個(gè)不同html模板文件；在項(xiàng)目中杈湾，可能所有頁面的模板文件可以共用一個(gè)哮翘，因?yàn)閔tml-webpack-plugin插件支持不同的模板loader，所以結(jié)合模板引擎來共用一個(gè)模板文件有了可能毛秘。
所以饭寺，配置自定義模板就派上用場了。具體的做法叫挟，借助于模板引擎來實(shí)現(xiàn)艰匙，例如插件沒有配置loader時(shí)默認(rèn)支持的ejs模板引擎，下面就以ejs模板引擎為例來說明抹恳；
例如項(xiàng)目中有2個(gè)入口html頁面员凝，它們可以共用一個(gè)模板文件，利用ejs模板的語法來動(dòng)態(tài)插入各自頁面的thunk和css樣式奋献，代碼可以這樣：
<%=htmlWebpackPlugin.options.title%><%for(varcssinhtmlWebpackPlugin.files.css) { %>"rel="stylesheet"><%} %><%for(varchunkinhtmlWebpackPlugin.files.chunks) { %>"><%} %>
你可能會(huì)對(duì)代碼中的上下文htmlWebpackPlugin數(shù)據(jù)感到迷惑健霹，這是啥東東旺上？其實(shí)這是html-webpack-plugin插件在生成html文件過程中產(chǎn)生的數(shù)據(jù)，這些數(shù)據(jù)對(duì)html模板文件是可用的糖埋。
自定義模板上下文數(shù)據(jù)
html-webpack-plugin在生成html文件的過程中宣吱，插件會(huì)根據(jù)配置生成一個(gè)對(duì)當(dāng)前模板可用的特定數(shù)據(jù)，模板語法可以根據(jù)這些數(shù)據(jù)來動(dòng)態(tài)生成html文件的內(nèi)容瞳别。
那么征候，插件生成的特殊數(shù)據(jù)格式是什么，生成的哪些數(shù)據(jù)呢祟敛？從源碼或者其官網(wǎng)都給出了答案疤坝。從源碼中可以看出模板引擎具體可以訪問的數(shù)據(jù)如下:
vartemplateParams={compilation:compilation,webpack:compilation.getStats().toJson(),webpackConfig:compilation.options,htmlWebpackPlugin:files:assets,options:self.options}};
從中可以看出，有四個(gè)主要的對(duì)像數(shù)據(jù)馆铁。其中compilation為所有webpack插件提供的都可以訪問的一個(gè)編譯對(duì)象跑揉，此處就不太做介紹，具體可以自己查資料埠巨。下面就對(duì)剩下的三個(gè)對(duì)象數(shù)據(jù)進(jìn)行說明畔裕。
webpack
webpack的stats對(duì)象；注意一點(diǎn)：
這個(gè)可以訪問的stats對(duì)象是htm文件生成時(shí)所對(duì)應(yīng)的stats對(duì)象乖订，而不是webpack運(yùn)行完成后所對(duì)應(yīng)的整個(gè)stats對(duì)象。
webpackConfig
webpack的配置項(xiàng)具练；通過這個(gè)屬性可以獲取webpack的相關(guān)配置項(xiàng)乍构，如通過webpackConfig.output.publicPath來獲取publicPath配置。當(dāng)然還可以獲取其他配置內(nèi)容扛点。
htmlWebpackPlugin
html-webpack-plugin插件對(duì)應(yīng)的數(shù)據(jù)哥遮。它包括兩部分：
htmlWebpackPlugin.files: 此次html-webpack-plugin插件配置的chunk和抽取的css樣式。該files值其實(shí)是webpack的stats對(duì)象的assetsByChunkName屬性代表的值陵究，該值是插件配置的chunk塊對(duì)應(yīng)的按照webpackConfig.output.filename映射的值眠饮。例如對(duì)應(yīng)上面配置插件各個(gè)屬性配置項(xiàng)例子中生成的數(shù)據(jù)格式如下：
"htmlWebpackPlugin":{"files":{"css":["inex.css"],"js":["common.js","index.js"],"chunks":{"common":{"entry":"common.js","css":["index.css"]},"index":{"entry":"index.js","css":["index.css"]}}}}
這樣，就可以是用如下模板引擎來動(dòng)態(tài)輸出script腳本
<%for(varchunkinhtmlWebpackPlugin.files.chunks){%>"><%} %>
htmlWebpackPlugin.options: 傳遞給插件的配置項(xiàng)铜邮，具體的配置項(xiàng)如上面插件配置項(xiàng)小節(jié)所描述的仪召。
插件事件
不知道你發(fā)現(xiàn)沒有，html-webpack-plugin插件在插入靜態(tài)資源時(shí)存在一些問題：
在插入js資源只能插入head或者body元素中松蒜，不能一些插入head中扔茅，另一些插入body中
不支持在html中文件內(nèi)聯(lián)*，例如在文件的某個(gè)地方用來內(nèi)聯(lián)外部腳本
為此秸苗，有人專門給插件作者提問了這個(gè)問題召娜；對(duì)此插件作者提供了插件事件，允許其他插件來改變html文件內(nèi)容惊楼。具體的事件如下：
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-emit
Sync（同步事件）:
* html-webpack-plugin-alter-chunks
這些事件是提供給其他插件使用的玖瘸，用于改變html的內(nèi)容秸讹。因此，要用這些事件需要提供一個(gè)webpack插件雅倒。例如下面定義的MyPlugin插件璃诀。
functionMyPlugin(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:[newMyPlugin({options:''})]
