html-webpack-plugin详解

最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：

• 为html文件中引入的外部资源如script、link动态添加每次build后的新内容

• 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

先来上一个例子：

const htmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
module.exports = {
    entry: './src/script/main.js',
    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'head'
        })
    ]
}

配置属性

• title

  生成html文件的标题

• filename

  就是html文件的文件名，默认是index.html

• template

  指定你生成的文件所依赖哪一个html文件模板，模板类型可以是html、jade、ejs等。但是要注意的是，如果想使用自定义的模板文件的时候，你需要安装对应的loader哦。

• inject有四个值： true body head false

  true 默认值
  body script标签位于html文件的 body 底部
  head script标签位于html文件的 head中
  false 不插入生成的js文件，这个几乎不会用到的

• favicon

  给你生成的html文件生成一个 favicon ,值是一个路径

  plugins: [
      new HtmlWebpackPlugin({
          ...
          favicon: 'path/to/my_favicon.ico'
      }) 
  

  然后再生成的html中就有了一个 link 标签

  <link rel="shortcut icon" href="example.ico">
  

• minify

使用minify会对生成的html文件进行压缩。默认是false。html-webpack-plugin内部集成了 html-minifier,因此，还可以对minify进行配置：（注意，虽然minify支持BooleanObject,但是不能直接这样写：minify: true , 这样会报错 ERROR in TypeError: Cannot use ‘in’ operator to search for ‘html5’ in true , 使用时候必须给定一个 { } 对象 ）

...
plugins: [
    new HtmlWebpackPlugin({
        ...
        minify: {
            removeAttributeQuotes: true // 移除属性的引号
        }
    })
]

待补充…

更多内容参考官网：https://github.com/jantimon/html-webpack-plugin#options