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