有關html-webpack-plugin有哪些用法？

這篇文章主要介紹了詳解html-webpack-plugin用法全解，現在分享給大家，也要為大家做個參考。

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

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片段 -->
<p id="example" class="example">test minify</p>

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

hash

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

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

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

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

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

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

cache

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

showErrors

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

chunks

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

...
<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() 的選項，了解全部選項的意義後，可以在專案建置時更靈活的使用。希望對大家的學習有幫助，也希望大家多多支持腳本家。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在微信小程式中有關button元件的使用說明

在微信小程式中如何使用progress元件

有關$.ajax()方法中如何從伺服器取得json資料

使用MUI框架如何載入外部網頁或伺服器資料

詳細講解Vue單元測試中Karma Mocha

#PHP閉包與匿名函數（詳細教學）

在微信小程式中如何使用三級連動選擇器

以上是有關html-webpack-plugin有哪些用法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！