webpack之html-webpack-plugin

简介

简化创建HTML文件以提供捆绑的插件

安装

// npm 
npm i --save-dev html-webpack-plugin
// yarn 
yarn add --dev html-webpack-plugin

使用

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

html-webpack-plugin常用配置

new HtmlWebpackPlugin({
  filename: 'index.html',  // 定义生成的html文件名
  template: './src/index.html',  // 引用html文件模版
  favicon: './favicon.ico',  // 将给定的图标路径添加到输出HTML
})

插件中的选项

font

NAME TYPE DEFAULT DESCRIPTION
title {string} ‘’ 生成html文档的标题

eg:

new HtmlWebpackPlugin({
  title: '我是标题'
});

filename

NAME TYPE DEFAULT DESCRIPTION
filename {string} ‘index.html’ 生成的html的文件名,默认名称为index.html

eg:

// 如果不设置则默认为index.html
new HtmlWebpackPlugin({
  filename: 'app.html'
});

// 也可以设置相应的路径
new HtmlWebpackPlugin({
  filename: 'app/index.html'
});

template

NAME TYPE DEFAULT DESCRIPTION
template {string} ‘’ 模版

eg:

new HtmlWebpackPlugin({
  template: 'index.html'
});

template是以引用的html文件为模版来生成新的html文件,在这里如果设置了template,那么设置的title则无效

templateParameters

NAME TYPE DEFAULT DESCRIPTION
templateParameters {Boolean/Object/Function} ‘’ 允许去覆盖tempalte中的属性
这个我没有试验出来效果,再次试出来了再来补充

inject

NAME TYPE DEFAULT DESCRIPTION
inject {Boolean/String} true true / ‘head’ / ‘body’ / false

eg:

new HtmlWebpackPlugin({
  inject: 'body'
});

inject的默认值为true,表示js文件放在body的尾部,truebody的效果是一样的,head表示js文件放在
head的尾部,false表示生成的html文件中不引用js文件

favicon

NAME TYPE DEFAULT DESCRIPTION
favicon {string} ‘’ 将给定的图标路径添加到输出HTML

eg:

new HtmlWebpackPlugin({
  favicon: 'favicon.ico'
});

meta

NAME TYPE DEFAULT DESCRIPTION
meta {Object} {} 注入meta标签

eg:

new HtmlWebpackPlugin({
  meta: {
    viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'
  }
});

minify

NAME TYPE DEFAULT DESCRIPTION
minify {Boolean Object} true 将html-minifier的选项作为对象来缩小输出

eg:

new HtmlWebpackPlugin({
  minify: {
      removeAttributeQuotes: true // 移除属性的引号
  }
});

这个选项我在练习官网给的默认例子时出现了报错{minify: true},后面我看了其他人的文章像例子中这样用又是可以的,所以这个
属性需要再试试。官方说明html-webpack-plugin是自带html-minifier的,所以做个flag,后期在观察

hash

NAME TYPE DEFAULT DESCRIPTION
hash {Boolean} false 如果为true,那么给js或css文件后面添加hash值

eg:

new HtmlWebpackPlugin({
  hash: true
});

cache

NAME TYPE DEFAULT DESCRIPTION
cache {Boolean} true 只有当文件内容发生改变时才会生成新的文件

eg:

new HtmlWebpackPlugin({
  cache: true
});

showErrors

NAME TYPE DEFAULT DESCRIPTION
showErrors {Boolean} true 错误细节将会被打印在html页面中

eg:

new HtmlWebpackPlugin({
  showErrors: true
});

chunks

NAME TYPE DEFAULT DESCRIPTION
chunks {?} ? -

chunks主要的作用是针对多入口(entry)文件,当你有多个入口文件的时候,对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。
chunks 默认会在生成的 html 文件中引用所有的 js 文件,当然你也可以指定引入哪些特定的文件。

eg:

// 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

NAME TYPE DEFAULT DESCRIPTION
excludeChunks {Array.} - 和chunks的作用相反

eg:

new HtmlWebpackPlugin({
  excludeChunks: ['index']
});

xhtml

NAME TYPE DEFAULT DESCRIPTION
xhtml {Boolean} false 如果是true,那么需要遵循xhtml的规范,标签需要自闭合

eg:

new HtmlWebpackPlugin({
  xhtml: true
});