詳解html-webpack-plugin用法全解，

詳解html-webpack-plugin用法全解，

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

// webpack.config.jsmodule.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 時，曾經簡單使用過這個外掛程式，但也只是用了常見的幾個選項，今天就跟著官方文檔走一走，看看它的所有用法。

title

顧名思義，設定產生的 html 檔案的標題。

filename

也沒什麼說的，產生 html 檔案的檔案名稱。預設為 index.html.

template

根據自己的指定的模板檔案來產生特定的 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 作為檔案名稱。

inject

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

1. true：預設值，script標籤位於html檔案的 body 底部
2. body：同 true
3. head：script 標籤位於 head 標籤內
4. false：不插入產生的 js 檔案，只是單純的產生一個 html 檔案
5. favicon：給產生的 html 檔案產生一個 favicon。屬性值為 favicon 檔案所在的路徑名。

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

產生的 html 標籤中會包含這樣一個 link 標籤

<link rel="shortcut icon" href="example.ico" rel="external nofollow" >

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

minify

minify 的作用是對 html 檔案進行壓縮，minify 的屬性值是一個壓縮選項或者 false 。預設值為false, 不對產生的 html 檔案進行壓縮。來看看這個壓縮選項。

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

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

<!-- 原html片段 --><div id="example" class="example">test minify</div>

<!-- 產生的html片段 --><div id=example class=example>test minify</div>

hash

hash選項的作用是 給產生的 js 檔案一個獨特的 hash 值，該 hash 值是該次 webpack 編譯的 hash 值。預設值為 false 。同樣看一個例子。

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

<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>

執行 webpack 命令後，你會看到你的產生的 html 檔案的 script 標籤內引用的 js 檔案，是不是有點變化了。

bundle.js 檔案後跟的一串 hash 值就是此次 webpack 編譯對應的 hash 值。

$ webpackHash: 22b9692e22e7be37b57eVersion: webpack 1.13.2

cache

預設值是 true。表示只有在內容變化時才產生一個新的檔案。

showErrors

showErrors 的作用是，如果 webpack 編譯出現錯誤，webpack會將錯誤資訊包裹在一個 pre 標籤內，屬性的預設值為 true ，也就是顯示錯誤資訊。

chunks

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

chunks 預設會在產生的 html 檔案中引用所有的 js 檔案，當然你也可以指定引入哪些特定的檔案。

看一個小例子。

// webpack.config.jsentry: {  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

...<script type=text/javascript src=index.js></script><script type=text/javascript src=index2.js></script>

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

excludeChunks

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

...excludeChunks: ['index1.js']

chunksSortMode

這個選項決定了 script 標籤的引用順序。預設有四個選項，'none', 'auto', 'dependency', '{function}'。

1. 'dependency' 不用說，按照不同檔案的依賴關係來排序。
2. 'auto' 預設值，外掛程式的內建的排序方式，具體順序這裡我也不太清楚...
3. 'none' 無序？ 不太清楚...
4. {function} 提供一個函數？但是函數的參數又是什麼? 不太清楚...

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

xhtml

一個布爾值，預設值是 false ，如果為 true ,則以相容 xhtml 的模式引用檔案。

總結

以上，就總結完了傳入 new HtmlWebpackPlugin() 的選項，瞭解全部選項的含義後，可以在項目構建時更靈活的使用。希望對大家的學習有所協助，也希望大家多多支援幫客之家。