html-webpack-plugin配置使用

作用

直接为项目生成一个或多个HTML文件（HTML文件个数由插件实例的个数决定），并将webpack打包后输出的所有脚本文件自动添加到插件生成的HTML文件中。通过配置，可以将根目录下用户自定义的HTML文件作为插件生成HTML文件的模板。另外，还可以通过向插件传递参数，控制HTML文件的输出。

用法：

1. 第一步：在项目根目录下安装插件：

cnpm install html-webpack-plugin --save-dev

2.第二步：在webpack配置文件头部require html-webpack-plugin模块，并保存引用至htmlWebpackPlugin[变量]。

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

3.第三步：为webpack配置文件暴露的对象添加一个plugins属性，属性值为一个数组，将新建的html-webpack-plugin对象实例添加到数组中。若不传入任何参数，那么插件将生成默认的html文件。

module.exports = {
 entry: {
     main:'./src/script/main.js'
 },
 output: {
     path: './dist',
     filename: 'js/[name].bundle.js'
 },
 plugins:[
     new htmlWebpackPlugin()
     ]
}

4.第四步：配置参数。为新建的对象实例传入一个对象字面量参数，初始化对象实例的属性

 plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: resolve('favicon.ico'),
      title: 'vue-element-admin',
      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
    }),
  ]

5.第五步：在HTML中使用