html-webpack-plugin用法總結

title

生成頁面的titile元素

filename

生成的html文件的文件名。默認index.html，能夠直接配置帶有子目錄

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

template

模版文件路徑

templateParameters

{Boolean|Object|Function} 容許覆蓋模板中使用的參數

//webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    templateParameters: {
      title: 'xxxx',
      favicon: './favicon/index.ico',
    }
  })
]

inject

插入的script插入的位置，四個可選值:
true: 默認值，script標籤位於html文件的body底部
body: 同true
head: script標籤位於html文件的head標籤內
false: 不插入生成的js文件，只是生成的html文件

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的模式引用文件