webpack插件篇：HtmlWebpackPlugin详解

用途说明

HtmlWebpackPlugin (自动生成html插件)

Generates a solid base html page for your web application with all your webpack generated css and js files built in. Supports custom templates, favicon, html-minifications and more:

webpack.config.js配置

HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({ title: 'Webpack App' })

案例

//webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
  entry:'./index.js',
  output:{
    path:__dirname+'/dist',
    filename:'bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin()
  ]
}

参数

{
  entry: 'index.js',
  output:{
    path: 'dist',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',//设置title的名字
      filename: 'admin.html',//设置这个html的文件名
      template:'header.html',//要使用的模块的路径
      inject: 'body',//把模板注入到哪个标签后
      favicon:'./images/favico.ico',//给html添加一个favicon
      minify:true,//HTML压缩
      hash:true,//hash化
      cache:false,//缓存
      showErrors:false,//显示错误
      chunks: {
          "head": {
            "entry": "assets/head_bundle.js",
            "css": [ "main.css" ]
          },
      },
      xhtml:false//是否自动毕业标签  
      }
    )
  ]
}