为了方便前端打包的时候需要重复删除dist文件夹，通过安装clean-webpack-plugin插件来解决这个问题。按照官网的步骤进行安装和配置：/package/clean-webpack-plugin第一步：安装clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
第二步：配置
//首先需要在onfig.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目录下的第三方包不需要被打包]}}
