资讯专栏INFORMATION COLUMN

html-webpack-plugin用法总结

gplane / 3648人阅读

摘要:默认不对文件进行压缩。中集成的,生成模板文件压缩配置,有很多配置项,这些配置项就是的压缩选项值。给生成的文件尾部添加一个值。错误信息是否写入文件。默认在文件中引用哪些文件用于多入口文件时。

title

生成页面的titile元素

filename

生成的html文件的文件名。默认index.html,可以直接配置带有子目录

</>复制代码

  1. //webpack.config.js
  2. ...
  3. plugins: [
  4. new HtmlWebpackPlugin({
  5. ...
  6. filename: "index1.html"//可带子目录"html/index1.html"
  7. })
  8. ]
template

模版文件路径

templateParameters

{Boolean|Object|Function} 允许覆盖模板中使用的参数

</>复制代码

  1. //webpack.config.js
  2. ...
  3. plugins: [
  4. new HtmlWebpackPlugin({
  5. ...
  6. templateParameters: {
  7. title: "xxxx",
  8. favicon: "./favicon/index.ico",
  9. }
  10. })
  11. ]
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;

</>复制代码

  1. //webpack.config.js
  2. ...
  3. plugins: [
  4. new HtmlWebpackPlugin({
  5. ...
  6. hash: true
  7. })
  8. ]

</>复制代码

  1. //html
阅读需要支付1元查看
<