html插件(自动生成index.html和打包前清空dist目录）

自动生成index.html

1.下载插件
yarn add html-webpack-plugin -D
或者 npm i html-webpack-plugin -D

2.先建一个index.html(模板)在src目录下

3.修改配置文件

开头引入插件

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

引入插件配置

plugins: [new HtmlWebpackPlugin({
	template: 'src/index.html' //模板文件的路径
})],

plugins: [ // 数组
    new HtmlWebpackPlugin({ // 用于使用模板打包时生成index.html文件，并且在run dev时会将模板文件也打包到内存中
      template: './src/index.html', // 模板文件的路径
      filename: 'index.html', // 打包后生成文件的名字
      hash: true, // 添加hash值解决缓存问题
      minify: { // 对打包的html模板进行压缩
        removeAttributeQuotes: true, // 删除属性双引号
        collapseWhitespace: true // 折叠空行变成一行
      }
    })
  ]

打包前清空dist目录插件

1.安装
cnpm i clean-webpack-plugin -D
1.1开头引入插件

2.修改配置文件

plugins: [new HtmlWebpackPlugin({
	template: 'src/index.html' //模板文件的路径
}), new CleanWebpackPlugin(['dist'])],//打包前清除dist目录下的文件