plugin可以参与打包的过程，可以实现编译和压缩代码

  1. yarn add html-wepback-plugin
  1. const path = require("path");
  2. const HtmlWebpackPlugin  = require("html-webpack-plugin");
  3. module.exports = {
  4.     entry:path.join(__dirname,'src/main.js'),
  5.     output:{
  6.         filename:"bundle.js",
  7.         path:path.join(__dirname,"dist")
  8.     },
  9.     module:{
  10.         rules:[
  11.             {
  12.                 test:/\.css$/,
  13.                 use:['style-loader','css-loader']
  14.             }
  15.         ]
  16.     },
  17.     plugins:[new HtmlWebpackPlugin({
  18.         template:path.join(__dirname,'public/index.html')
  19.     })],++
  21.     mode:"development"
  22. }


1-2 打包之前清除dist目录

  1. cnpm i clean-webpack-plugin -S
  2. //清除dist目录下需要的文件
  1. + const {CleanWebpackPlugin} = require("clean-webpack-plugin");
  2. const config =  {
  3.     ...
  4.     plugins:[
  5.       ...
  6. +      new CleanWebpackPlugin()  
  7.     ],
  8.     mode:'development'  //模式
  9. }