- 2019-02-18 創(chuàng)建
主要作用
為html文件中引入的外部資源如script、link動態(tài)添加每次compile后的hash忆某，防止引用緩存的外部文件問題
可以生成創(chuàng)建html入口文件点待，比如單頁面可以生成一個html文件入口，配置N個html-webpack-plugin可以生成N個頁面入口
詳解
插件的基本作用就是生成html文件弃舒。原理很簡單:
將 webpack中entry配置的相關(guān)入口chunk 和 extract-text-webpack-plugin抽取的css樣式 插入到該插件提供的template或者templateContent配置項指定的內(nèi)容基礎(chǔ)上生成一個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文件內(nèi)容如下
<!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>
配置項
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)題。配置該項通铲，它并不會替換指定模板文件中的title元素的內(nèi)容毕莱，除非html模板文件中使用了模板引擎語法來獲取該配置項值，如下ejs模板語法形式：
<title>{%= o.htmlWebpackPlugin.options.title %}</title>
-
filename：輸出文件的文件名稱颅夺，默認為index.html朋截，不配置就是該文件名；此外吧黄，還可以為輸出文件指定目錄位置（例如'html/index.html'）**關(guān)于filename補充兩點：**1部服、filename配置的html文件目錄是相對于webpackConfig.output.path路徑而言的，不是相對于當(dāng)前項目目錄結(jié)構(gòu)的拗慨。
2廓八、指定生成的html文件內(nèi)容中的link和script路徑是相對于生成目錄下的，寫路徑的時候請寫生成目錄下的相對路徑胆描。 -
template: 本地模板文件的位置瘫想，支持加載器(如handlebars、ejs昌讲、undersore国夜、html等)，如比如handlebars!src/index.hbs短绸；**關(guān)于template補充幾點：**1车吹、template配置項在html文件使用
file-loader時，其所指定的位置找不到醋闭，導(dǎo)致生成的html文件內(nèi)容不是期望的內(nèi)容窄驹。
2、為template指定的模板文件沒有指定任何loader的話证逻，默認使用ejs-loader乐埠。如template: './index.html'，若沒有為.html指定任何loader就使用ejs-loader templateContent: string|function囚企，可以指定模板的內(nèi)容丈咐，不能與template共存。配置值為function時龙宏，可以直接返回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都不會注入到模板文件中 favicon: 添加特定favicon路徑到輸出的html文檔中锯蛀，這個同title配置項，需要在模板中動態(tài)獲取其路徑值hash：true|false键菱，是否為所有注入的靜態(tài)資源添加webpack每次編譯產(chǎn)生的唯一hash值谬墙，添加hash形式如下所示：
html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>chunks：允許插入到模板中的一些chunk，不配置此項默認會將entry中所有的thunk注入到模板中经备。在配置多個頁面時拭抬，每個頁面注入的thunk應(yīng)該是不相同的，需要通過該配置為不同頁面注入不同的thunk侵蒙；excludeChunks: 這個與chunks配置項正好相反造虎，用來配置不允許注入的thunk。-
chunksSortMode: none | auto| function纷闺，默認auto算凿； 允許指定的thunk在插入到html文檔前進行排序。function值可以指定具體排序規(guī)則犁功；auto基于thunk的id進行排序氓轰； none就是不排序
xhtml: true|fasle, 默認false；是否渲染link為自閉合的標(biāo)簽浸卦，true則為自閉合標(biāo)簽cache: true|fasle, 默認true署鸡； 如果為true表示在對應(yīng)的thunk文件修改后就會emit文件showErrors: true|false，默認true限嫌；是否將錯誤信息輸出到html頁面中靴庆。這個很有用，在生成html文件的過程中有錯誤信息怒医，輸出到頁面就能看到錯誤相關(guān)信息便于調(diào)試炉抒。minify: {....}|false；傳遞 html-minifier 選項給 minify 輸出稚叹，false就是不使用html壓縮焰薄，minify具體配置參數(shù)請點擊html-minifier
chunks順序
如果只設(shè)置 chunks 屬性，html 引入順序并不會按照 chunks 數(shù)組殊勛排列扒袖，例：
chunks: ['common', 'public', 'index'],
解決：
new HtmlWebpackPlugin({
...
chunks: ['common', 'public', 'index'],
chunksSortMode: function (chunk1, chunk2) {
var order = ['common', 'public', 'index'];
var order1 = order.indexOf(chunk1.names[0]);
var order2 = order.indexOf(chunk2.names[0]);
return order1 - order2;
}
// chunksSortMode: 'manual' // 手動排序
})
