title

生成頁面的titile元素

filename

生成的html檔案的檔名。預設index.html，可以直接配置帶有子目錄

//webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    filename: 'index1.html'//可帶子目錄'html/index1.html'
  })
]

template

模版檔案路徑

inject

插入的script插入的位置，四個可選值:true: 預設值，script標籤位於html檔案的body底部body: 同truehead: script標籤位於html檔案的head

favicon

為生成的html檔案生成一個favicon，屬性值是路徑

minify

對html檔案進行壓縮。屬性值是false或者壓縮選項值。預設false不對html檔案進行壓縮。html-webpack-plugin中整合的html-minifier，生成模板檔案壓縮配置，有很多配置項，這些配置項就是minify的壓縮選項值。

hash

給生成的js檔案尾部新增一個hash值。這個hash值是本次webpack編譯的hash值。預設false;

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

//html
<script type="text/javascript" src="bundle.js?59a5ed17040d94df87fe">
//59a5ed17040d94df87fe是本次webpack編譯的hash值

cache

Boolean型別。只在檔案被修改的時候才生成一個新檔案。預設值true

showErrors

Boolean型別。錯誤資訊是否寫入html檔案。預設true

chunks

在html檔案中引用哪些js檔案,用於多入口檔案時。不指定chunks時，所有檔案都引用

//webpack.config.js
entry: {
  index1: path.resolve(__dirname, './index1.js'),
  index2: path.resolve(__dirname, './index2.js'),
  index3: path.resolve(__dirname, './index3.js')
}
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    chunks: [index1, index2]//html檔案中只引入index1.js, index2.js
  })
]
 

excludeChunks

與chunks相反，html檔案不引用哪些js檔案

//webpack.config.js
entry: {
  index1: path.resolve(__dirname, './index1.js'),
  index2: path.resolve(__dirname, './index2.js'),
  index3: path.resolve(__dirname, './index3.js')
}
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    excludeChunks: [index3.js]//html檔案中不引入index3.js
  })
]

chunksSortMode

控制script標籤的引用順序。預設五個選項:none: 無序auto: 預設值, 按外掛內建的排序方式dependency: 根據不同檔案的依賴關係排序manual: chunks按引入的順序排序, 即屬性chunks的順序{Function}: 指定具體的排序規則

xhtml

Boolean型別，預設false, true時以相容xhtml的模式引用檔案