摘要：所有的這些都是的功勞。默認(rèn)為根據(jù)自己的指定的模板文件來(lái)生成特定的文件。最終在文件夾內(nèi)會(huì)生成一個(gè)和文件。屬性值為文件所在的路徑名。默認(rèn)值為不對(duì)生成的文件進(jìn)行壓縮。選項(xiàng)的作用主要是針對(duì)多入口文件。不用說，按照不同文件的依賴關(guān)系來(lái)排序。

本文只在個(gè)人博客和 SegmentFault 社區(qū)個(gè)人專欄發(fā)表，轉(zhuǎn)載請(qǐng)注明出處  
個(gè)人博客: https://zengxiaotao.github.io  
SegmentFault 個(gè)人專欄: https://segmentfault.com/blog...

html-webpack-plugin 可能用過的 webpack 的童鞋都用過這個(gè) plugin ,就算沒用過可能也聽過。我們?cè)趯W(xué)習(xí)webpack的時(shí)候，可能經(jīng)常會(huì)看到這樣的一段代碼。

// webpack.config.js
module.exports = {
    entry: path.resolve(__dirname, "./app/index.js"),
    output:{
        path: path.resolve(__dirname, "./build"),
        filename: "bundle.js"
    }
    ...
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

之后在終端輸入 webpack 命令后

webpack

你會(huì)神奇的看到在你的 build 文件夾會(huì)生成一個(gè) index.html 文件和一個(gè) bundle.js 文件，而且 index.html 文件中自動(dòng)引用 webpack 生成的 bundle.js 文件。

所有的這些都是 html-webpack-plugin 的功勞。它會(huì)自動(dòng)幫你生成一個(gè) html 文件，并且引用相關(guān)的 assets 文件(如 css, js)。

自己在六月第一次接觸前端自動(dòng)化構(gòu)建，學(xué)習(xí) webpack 和 react 時(shí)，曾經(jīng)簡(jiǎn)單使用過這個(gè)插件，但也只是用了常見的幾個(gè)選項(xiàng)，今天就跟著官方文檔走一走，看看它的所有用法。

顧名思義，設(shè)置生成的 html 文件的標(biāo)題。

也沒什么說的，生成 html 文件的文件名。默認(rèn)為 index.html.

根據(jù)自己的指定的模板文件來(lái)生成特定的 html 文件。這里的模板類型可以是任意你喜歡的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定義的模板文件時(shí)，需要提前安裝對(duì)應(yīng)的 loader， 否則webpack不能正確解析。以 jade 為例。

npm install jade-loader --save-dev

// webpack.config.js
...
loaders: {
    ...
    {
        test: /.jade$/,
        loader: "jade"
    }
}
plugins: [
    new HtmlWebpackPlugin({
        ...
        jade: "path/to/yourfile.jade"
    })
]

最終在build文件夾內(nèi)會(huì)生成一個(gè) yourfile.html 和 bundle.js 文件?，F(xiàn)在我們?cè)倩仡^來(lái)看看之前將的 title 屬性。

如果你既指定了 template 選項(xiàng)，又指定了 title 選項(xiàng)，那么webpack 會(huì)選擇哪一個(gè)？ 事實(shí)上，這時(shí)候會(huì)選擇你指定的模板文件的 title, 即使你的模板文件中未設(shè)置 title。

那么 filename 呢，是否也會(huì)覆蓋，其實(shí)不是，會(huì)以指定的 filename 作為文件名。

注入選項(xiàng)。有四個(gè)選項(xiàng)值 true, body, head, false.

true

默認(rèn)值，script標(biāo)簽位于html文件的 body 底部

body

同 true

head

script 標(biāo)簽位于 head 標(biāo)簽內(nèi)

false

不插入生成的 js 文件，只是單純的生成一個(gè) html 文件

給生成的 html 文件生成一個(gè) favicon。屬性值為 favicon 文件所在的路徑名。

// webpack.config.js
...
plugins: [
    new HtmlWebpackPlugin({
        ...
        favicon: "path/to/yourfile.ico"
    }) 
]

生成的 html 標(biāo)簽中會(huì)包含這樣一個(gè) link 標(biāo)簽

同 title 和 filename 一樣，如果在模板文件指定了 favicon，會(huì)忽略該屬性。

minify 的作用是對(duì) html 文件進(jìn)行壓縮，minify 的屬性值是一個(gè)壓縮選項(xiàng)或者 false 。默認(rèn)值為false, 不對(duì)生成的 html 文件進(jìn)行壓縮。來(lái)看看這個(gè)壓縮選項(xiàng)。

html-webpack-plugin 內(nèi)部集成了 html-minifier ,這個(gè)壓縮選項(xiàng)同 html-minify 的壓縮選項(xiàng)完全一樣，
看一個(gè)簡(jiǎn)單的例子。

// webpack.config.js
...
plugins: [
    new HtmlWebpackPlugin({
        ...
        minify: {
            removeAttributeQuotes: true // 移除屬性的引號(hào)
        }
    })
]

test minify

test minify

hash選項(xiàng)的作用是 給生成的 js 文件一個(gè)獨(dú)特的 hash 值，該 hash 值是該次 webpack 編譯的 hash 值。默認(rèn)值為 false 。同樣看一個(gè)例子。

// webpack.config.js
plugins: [
    new HtmlWebpackPlugin({
        ...
        hash: true
    })
]

執(zhí)行 webpack 命令后，你會(huì)看到你的生成的 html 文件的 script 標(biāo)簽內(nèi)引用的 js 文件，是不是有點(diǎn)變化了。
bundle.js 文件后跟的一串 hash 值就是此次 webpack 編譯對(duì)應(yīng)的 hash 值。

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

默認(rèn)值是 true。表示只有在內(nèi)容變化時(shí)才生成一個(gè)新的文件。

showErrors 的作用是，如果 webpack 編譯出現(xiàn)錯(cuò)誤，webpack會(huì)將錯(cuò)誤信息包裹在一個(gè) pre 標(biāo)簽內(nèi)，屬性的默認(rèn)值為 true ，也就是顯示錯(cuò)誤信息。

chunks 選項(xiàng)的作用主要是針對(duì)多入口(entry)文件。當(dāng)你有多個(gè)入口文件的時(shí)候，對(duì)應(yīng)就會(huì)生成多個(gè)編譯后的 js 文件。那么 chunks 選項(xiàng)就可以決定是否都使用這些生成的 js 文件。

chunks 默認(rèn)會(huì)在生成的 html 文件中引用所有的 js 文件，當(dāng)然你也可以指定引入哪些特定的文件。

看一個(gè)小例子。

// webpack.config.js
entry: {
    index: path.resolve(__dirname, "./src/index.js"),
    index1: path.resolve(__dirname, "./src/index1.js"),
    index2: path.resolve(__dirname, "./src/index2.js")
}
...
plugins: [
    new HtmlWebpackPlugin({
        ...
        chunks: ["index","index2"]
    })
]

執(zhí)行 webpack 命令之后，你會(huì)看到生成的 index.html 文件中，只引用了 index.js 和 index2.js

...

而如果沒有指定 chunks 選項(xiàng)，默認(rèn)會(huì)全部引用。

弄懂了 chunks 之后，excludeChunks 選項(xiàng)也就好理解了，跟 chunks 是相反的，排除掉某些 js 文件。 比如上面的例子，其實(shí)等價(jià)于下面這一行

...
excludeChunks: ["index1.js"]

這個(gè)選項(xiàng)決定了 script 標(biāo)簽的引用順序。默認(rèn)有四個(gè)選項(xiàng)，"none", "auto", "dependency", "{function}"。

"dependency" 不用說，按照不同文件的依賴關(guān)系來(lái)排序。

"auto" 默認(rèn)值，插件的內(nèi)置的排序方式，具體順序這里我也不太清楚...

"none" 無(wú)序？ 不太清楚...

{function} 提供一個(gè)函數(shù)？但是函數(shù)的參數(shù)又是什么? 不太清楚...

如果有使用過這個(gè)選項(xiàng)或者知道其具體含義的同學(xué)，還請(qǐng)告知一下。。。

一個(gè)布爾值，默認(rèn)值是 false ，如果為 true ,則以兼容 xhtml 的模式引用文件。

以上，就總結(jié)完了傳入 new HtmlWebpackPlugin() 的選項(xiàng)，了解全部選項(xiàng)的含義后，可以在項(xiàng)目構(gòu)建時(shí)更靈活的使用。

全文完