webpack打包的时候自动删除dist文件夹

    为了方便前端打包的时候需要重复删除dist文件夹，通过安装clean-webpack-plugin插件来解决这个问题。
    按照官网的步骤进行安装和配置：https://www.npmjs.com/package/clean-webpack-plugin
    第一步：安装clean-webpack-plugin

npm install --save-dev clean-webpack-plugin

    第二步：配置

//首先需要在webpack.cconfig.js文件中导入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//然后再“plugins”里面实例化这个插件即可
const webpackConfig = {
    plugins: [
        new CleanWebpackPlugin(),
    ],
};
module.exports = webpackConfig;

我自己的一个例子

//导入node.js中专门操作路径的模块
const path = require ('path')
//1. 导入HTML插件，需要构造一个函数
const HtmlPlugin = require ('html-webpack-plugin')
// 2. 创建HTML插件的实例化对象
const htmlPlugin =new HtmlPlugin ({
    template:'./src/index.html',   //指定原文件路径
    filename: './index.html'   //指定生成文件的路径
})
// 导入一个自动删除“dist”文件夹的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode:'development',
    //将文件指定打包路径及打包的名称
    entry : path.join(__dirname,'./src/index.js'),  //需要打包的文件的路径
    output : {
        path : path.join(__dirname,'./dist'), //输出文件存放的路径
        filename : 'js/main.js'  //生成的文件名
    },
    //3. tongguo plugins节点，使htmlPlugin插件生效
    //将自动删除“dist”文件夹的插件实例化
    plugins: [htmlPlugin,
        new CleanWebpackPlugin()],  
    // 监听文件改动，自动打包
    devServer: {
        contentBase:path.join(__dirname,'./'),
        compress: true,
        port: 8080,
        open: 'Chrome',
        host: '127.0.0.1'
    },
    module:{
        //所有第三方文件模块的匹配规则
        rules: [
            //文件后缀名的匹配规则
            //处理.css文件
            {test: /\.css$/,use: ['style-loader','css-loader']},
            //test指定什么类型文件，$表示以什么结尾的文件，use表示用什么方法去处理这样的文件
            //必须先是'style-loader'，后面才是'css-loader'
            //处理.less文件
            {test: /\.less$/,use: ['style-loader','css-loader','less-loader']},
            //与上面类似
            //处理图片类型文件
            {test: /\.jpg|pan|gif$/,use: ['url-loader?limit-22229&outputPath=images']},
            //limit用来指定图片的大小，单位是字节（byte），只有≤limit的图片才能被转换为base64格式
            //在配置babel-loader的时候，多个参数之间，使用&富豪进行分隔，对于指定路径的采用“outputPath”参数，后面接指定的路径
            //处理webpack无法处理的高级语法
            {test: /\.js$/,use: 'babel-loader',exclude: /node_modules/},
            // 注意：必须使用exclude指定排除项，因为node_modules目录下的第三方包不需要被打包
        ]
    }
}