webpack学习-HtmlWebpackPlugin插件自动创建html文件

webpack学习 自动创建html文件

安装插件   npm install --save-dev html-webpack-plugin

webpack文档地址:v4.webpack.docschina.org/plugins/htm…

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  /** 入口文件的位置 */
  entry: './public/index.js',
  output: {
    /** 文件打包后的出口路径 */
    path: path.resolve(__dirname, 'build'),
    /** 文件打包后的名字 [name]将被替换成原文件名 */
    filename: 'da_bao_shu_chu_wen_jian_[name]_[hash].js'
  },
 /**.....省略其它代码........省略其它代码........省略其它代码........省略其它代码...*/
  plugins: [
    /** 用插件自动创建html文件 */
    new HtmlWebpackPlugin()
  ]
}

##.自动创建了index.html,并且也自动引入了打包输入文件.

##.更多功能扩展

插件支持传入相关配置参数.

插件的文档地址:github.com/jantimon/ht…

个别参数介绍:

template:比如vue中的就必须指定一个index.html,该文件中需要有一个<div id="app"/>用于挂载根组件,这种用户自定义内容的一个div就必须写在模板中.

// 用插件自动创建html文件
    new HtmlWebpackPlugin({
      template: './public/index.html', //原模板文件地址(生成的html中会带有模板文件中相关内容)
      filename: 'da_bao_index.html', //生成的文件名称
      minify:{
        caseSensitive:true
      }
    })

根据文档介绍,可以有更多的配置项,如:是否打包为最小值,是否去除引号,是否去除注释,是否去除空格,是否压缩等等等.需要用到的时候可以再查文档.不过一定要注意,文档的版本,与使用的版本是否兼容.