一、简介

说到自动清理打包目录，许多小伙伴不知道是什么，其实也相对简单，就是清理 webpack 打包出来的程序存放目录（如 build、dist）。为什么要清理打包文件呢？原因也相对简单，例如存放打包文件的文件夹内，如果某一天意放了一些其他文件，就可能会对我们的项目产生不可意料的影响。所以在每次打包前，对其进行一次清理，就会避免许多潜在的问题。

二、初始案例

这里准备了一个已经可以使用 webpack 指令打包的 demo 项目。小伙伴可以自行下载 源码

如果 node_modules 文件误删或者丢失，可以使用命令 npm install 重新下载 package.json 中的包

三、clean-webpack-plugin

webpack 自动清理打包文件目录功能，依赖于 clean-webpack-plugin 插件，使用下面命令即可安装 clean-webpack-plugin 插件

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

四、配置自动清理

在 webpack.config.js 文件中添加如下两个配置，这里打包的目录配置的是 build 文件夹。如下

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 注意解构赋值

// 清空指定的打包目录，这里不用配置哪个目录，会自动找到 output 指定的输出目录
new CleanWebpackPlugin()

五、打包项目

使用下面命令进行打包项目，执行命令后会先对旧的打包文件进行删除，然后再项目进行打包。如下

webpack

如何验证：在指定 build 打包文件夹，可以新建放置一些其他文件，再执行 webpack 可以看下是否有，闲杂文件

六、源码

https://download.csdn.net/download/weixin_46785144/85190060