摘要：所有的這些都是的功勞。默認為根據自己的指定的模板文件來生成特定的文件。最終在文件夾內會生成一個和文件。屬性值為文件所在的路徑名。默認值為不對生成的文件進行壓縮。選項的作用主要是針對多入口文件。不用說，按照不同文件的依賴關系來排序。

本文只在個人博客和 SegmentFault 社區個人專欄發表，轉載請注明出處  
個人博客: https://zengxiaotao.github.io  
SegmentFault 個人專欄: https://segmentfault.com/blog...

html-webpack-plugin 可能用過的 webpack 的童鞋都用過這個 plugin ,就算沒用過可能也聽過。我們在學習webpack的時候，可能經常會看到這樣的一段代碼。

// 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

你會神奇的看到在你的 build 文件夾會生成一個 index.html 文件和一個 bundle.js 文件，而且 index.html 文件中自動引用 webpack 生成的 bundle.js 文件。

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

自己在六月第一次接觸前端自動化構建，學習 webpack 和 react 時，曾經簡單使用過這個插件，但也只是用了常見的幾個選項，今天就跟著官方文檔走一走，看看它的所有用法。

顧名思義，設置生成的 html 文件的標題。

也沒什么說的，生成 html 文件的文件名。默認為 index.html.

根據自己的指定的模板文件來生成特定的 html 文件。這里的模板類型可以是任意你喜歡的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定義的模板文件時，需要提前安裝對應的 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文件夾內會生成一個 yourfile.html 和 bundle.js 文件。現在我們再回頭來看看之前將的 title 屬性。

如果你既指定了 template 選項，又指定了 title 選項，那么webpack 會選擇哪一個？ 事實上，這時候會選擇你指定的模板文件的 title, 即使你的模板文件中未設置 title。

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

注入選項。有四個選項值 true, body, head, false.

true

默認值，script標簽位于html文件的 body 底部

body

同 true

head

script 標簽位于 head 標簽內

false

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

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

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

生成的 html 標簽中會包含這樣一個 link 標簽

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

minify 的作用是對 html 文件進行壓縮，minify 的屬性值是一個壓縮選項或者 false 。默認值為false, 不對生成的 html 文件進行壓縮。來看看這個壓縮選項。

html-webpack-plugin 內部集成了 html-minifier ,這個壓縮選項同 html-minify 的壓縮選項完全一樣，
看一個簡單的例子。

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

test minify

test minify

hash選項的作用是 給生成的 js 文件一個獨特的 hash 值，該 hash 值是該次 webpack 編譯的 hash 值。默認值為 false 。同樣看一個例子。

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

執行 webpack 命令后，你會看到你的生成的 html 文件的 script 標簽內引用的 js 文件，是不是有點變化了。
bundle.js 文件后跟的一串 hash 值就是此次 webpack 編譯對應的 hash 值。

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

默認值是 true。表示只有在內容變化時才生成一個新的文件。

showErrors 的作用是，如果 webpack 編譯出現錯誤，webpack會將錯誤信息包裹在一個 pre 標簽內，屬性的默認值為 true ，也就是顯示錯誤信息。

chunks 選項的作用主要是針對多入口(entry)文件。當你有多個入口文件的時候，對應就會生成多個編譯后的 js 文件。那么 chunks 選項就可以決定是否都使用這些生成的 js 文件。

chunks 默認會在生成的 html 文件中引用所有的 js 文件，當然你也可以指定引入哪些特定的文件。

看一個小例子。

// 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"]
    })
]

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

...

而如果沒有指定 chunks 選項，默認會全部引用。

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

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

這個選項決定了 script 標簽的引用順序。默認有四個選項，"none", "auto", "dependency", "{function}"。

"dependency" 不用說，按照不同文件的依賴關系來排序。

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

"none" 無序？ 不太清楚...

{function} 提供一個函數？但是函數的參數又是什么? 不太清楚...

如果有使用過這個選項或者知道其具體含義的同學，還請告知一下。。。

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

以上，就總結完了傳入 new HtmlWebpackPlugin() 的選項，了解全部選項的含義后，可以在項目構建時更靈活的使用。

全文完