6 plugins

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

6-1 给打包文件一个html文件

配置

yarn add html-webpack-plugin

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")++引入
module.exports = {
    entry: path.join(__dirname, 'src/main.js'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            { test: /\.css/, use: ["style-loader", "css-loader"] }
        ]
    },
    plugins:[                        //++打包
        new HtmlWebpackPlugin(
        {
          //以哪个文件为模板
            template:path.join(__dirname,'public/index.html'),
          //文件名
            filename:'index.html'
        })                                 
    ],
    mode: "development"
}

生成

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

#安装
yarn add clean-webpack-plugin

#导入
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

#使用
+ const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const config =  {
    ...
    plugins:[
      ...
+      new CleanWebpackPlugin()  
    ],
    mode:'development'  //模式
}