引言

最近在react項目中初次用到了html-webapck-plugin插件，用到該插件的兩個主要作用：

為html文件中引入的外部資源如script、link動態添加每次compile后的hash，防止引用緩存的外部文件問題

可以生成創建html入口文件，比如單頁面可以生成一個html文件入口，配置N個html-webpack-plugin可以生成N個頁面入口

有了這種插件，那么在項目中遇到類似上面的問題都可以輕松的解決。

在本人項目中使用html-webpack-plugin，由于對該插件不太熟悉，開發過程中遇到這樣或者那樣的問題，下面就來說說這個插件。

html-webpack-plugin

插件的基本作用就是生成html文件。原理很簡單：

將 webpack中`entry`配置的相關入口thunk 和 `extract-text-webpack-plugin`抽取的css樣式 插入到該插件提供的`template`或者`templateContent`配置項指定的內容基礎上生成一個html文件，具體插入方式是將樣式`link`插入到`head`元素中，`script`插入到`head`或者`body`中。

實例化該插件時可以不配置任何參數，例如下面這樣：

var HtmlWebpackPlugin = require( html-webpack-plugin )webpackconfig = { ... plugins: [ new HtmlWebpackPlugin() ]}

不配置任何選項的html-webpack-plugin插件，他會默認將webpack中的entry配置所有入口thunk和extract-text-webpack-plugin抽取的css樣式都插入到文件指定的位置。例如上面生成的html文件內容如下：

 !DOCTYPE html html  head  meta charset= UTF-8  title Webpack App /title  link href= index-af150e90583a89775c77.css rel= stylesheet /head  body  script type= text/javascript src= common-26a14e7d42a7c7bbc4c2.js /script  script type= text/javascript src= index-af150e90583a89775c77.js /script /body /html 

當然可以使用具體的配置項來定制化一些特殊的需求，那么插件有哪些配置項呢？

html-webpack-plugin配置項

插件提供的配置項比較多，通過源碼可以看出具體的配置項如下：

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文檔的標題。配置該項，它并不會替換指定模板文件中的title元素的內容，除非html模板文件中使用了模板引擎語法來獲取該配置項值，如下ejs模板語法形式：

 title {%= o.htmlWebpackPlugin.options.title %} /title 

filename：輸出文件的文件名稱，默認為index.html，不配置就是該文件名；此外，還可以為輸出文件指定目錄位置（例如 html/index.html ）

關于filename補充兩點：

1、filename配置的html文件目錄是相對于webpackConfig.output.path路徑而言的，不是相對于當前項目目錄結構的。
2、指定生成的html文件內容中的link和script路徑是相對于生成目錄下的，寫路徑的時候請寫生成目錄下的相對路徑。

template: 本地模板文件的位置，支持加載器(如handlebars、ejs、undersore、html等)，如比如 handlebars!src/index.hbs；

關于template補充幾點：

1、template配置項在html文件使用file-loader時，其所指定的位置找不到，導致生成的html文件內容不是期望的內容。
2、為template指定的模板文件沒有指定任何loader的話，默認使用ejs-loader。如template: ./index.html ，若沒有為.html指定任何loader就使用ejs-loader

templateContent: string|function，可以指定模板的內容，不能與template共存。配置值為function時，可以直接返回html字符串，也可以異步調用返回html字符串。

inject：向template或者templateContent中注入所有靜態資源，不同的配置值注入的位置不經相同。

1、true或者body：所有JavaScript資源插入到body元素的底部
2、head: 所有JavaScript資源插入到head元素中
3、false： 所有靜態資源css和JavaScript都不會注入到模板文件中

favicon: 添加特定favicon路徑到輸出的html文檔中，這個同title配置項，需要在模板中動態獲取其路徑值

hash：true|false，是否為所有注入的靜態資源添加webpack每次編譯產生的唯一hash值，添加hash形式如下所示：
html script type= text/javascript src= common.js?a3e1396b501cdd9041be /script

chunks：允許插入到模板中的一些chunk，不配置此項默認會將entry中所有的thunk注入到模板中。在配置多個頁面時，每個頁面注入的thunk應該是不相同的，需要通過該配置為不同頁面注入不同的thunk；

excludeChunks: 這個與chunks配置項正好相反，用來配置不允許注入的thunk。

chunksSortMode: none | auto| function，默認auto； 允許指定的thunk在插入到html文檔前進行排序。
function值可以指定具體排序規則；auto基于thunk的id進行排序； none就是不排序

xhtml: true|fasle, 默認false；是否渲染link為自閉合的標簽，true則為自閉合標簽

cache: true|fasle, 默認true； 如果為true表示在對應的thunk文件修改后就會emit文件

showErrors: true|false，默認true；是否將錯誤信息輸出到html頁面中。這個很有用，在生成html文件的過程中有錯誤信息，輸出到頁面就能看到錯誤相關信息便于調試。

minify: {....}|false；傳遞 html-minifier 選項給 minify 輸出，false就是不使用html壓縮。

下面的是一個用于配置這些屬性的一個例子：

 new HtmlWebpackPlugin({ title: rd平臺 , template: entries/index.html , // 源模板文件 filename: ./index.html , // 輸出文件【注意：這里的根路徑是module.exports.output.path】 showErrors: true, inject: body , chunks: [ common , index ] })

配置多個html頁面

html-webpack-plugin的一個實例生成一個html文件，如果單頁應用中需要多個頁面入口，或者多頁應用時配置多個html時，那么就需要實例化該插件多次；

即有幾個頁面就需要在webpack的plugins數組中配置幾個該插件實例：

 ... 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模板文件；在項目中，可能所有頁面的模板文件可以共用一個，因為html-webpack-plugin插件支持不同的模板loader，所以結合模板引擎來共用一個模板文件有了可能。

所以，配置自定義模板就派上用場了。具體的做法，借助于模板引擎來實現，例如插件沒有配置loader時默認支持的ejs模板引擎，下面就以ejs模板引擎為例來說明；

例如項目中有2個入口html頁面，它們可以共用一個模板文件，利用ejs模板的語法來動態插入各自頁面的thunk和css樣式，代碼可以這樣：

 !DOCTYPE html html >
你可能會對代碼中的上下文htmlWebpackPlugin數據感到迷惑，這是啥東東？其實這是html-webpack-plugin插件在生成html文件過程中產生的數據，這些數據對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插件提供的都可以訪問的一個編譯對象，此處就不太做介紹，具體可以自己查資料。下面就對剩下的三個對象數據進行說明。
webpack
webpack的stats對象；注意一點：
這個可以訪問的stats對象是htm文件生成時所對應的stats對象，而不是webpack運行完成后所對應的整個stats對象。
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映射的值。例如對應上面配置插件各個屬性配置項例子中生成的數據格式如下：
 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 ] } }}
這樣，就可以是用如下模板引擎來動態輸出script腳本
 % for (var chunk in htmlWebpackPlugin.files.chunks) { % script type= text/javascript src=/ #/ /script % } % 
htmlWebpackPlugin.options: 傳遞給插件的配置項，具體的配置項如上面插件配置項小節所描述的。
插件事件
不知道你發現沒有，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-emit
Sync（同步事件）:
 * 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: })]
以上就是關于html-webpack-plugin的詳細介紹的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。