cleanwebpackplugin 可在每次打包前自动清空 dist 目录，避免旧文件残留；需通过解构导入 { cleanwebpackplugin }，配置于 plugins 数组，默认清理 output.path 目录，支持 root、exclude、verbose、dry 等进阶选项。
Webpack 中通过 CleanWebpackPlugin 插件，可以在每次打包前自动清空 dist 目录，避免旧文件残留。它不依赖手动删除或 shell 命令，而是集成在构建流程中，干净、可靠、可配置。
安装插件
在项目根目录执行：
-
npm install clean-webpack-plugin -D（推荐使用最新版 4.x） - 注意：v4+ 版本导出方式为解构导入，不再支持
require('clean-webpack-plugin')直接调用
基础配置（推荐写法）
在 webpack.config.js 中引入并注册插件：
- 使用解构语法：
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); - 确保
output.path已正确定义（如path.resolve(__dirname, 'dist')） - 将插件实例加入
plugins数组即可，无需传参，默认清理output.path目录
示例配置片段：
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash:8].js'
},
plugins: [
new CleanWebpackPlugin()
]
};
进阶配置（按需定制）
若输出路径不在项目根目录下，或需排除某些文件、开启调试日志，可传入选项对象：
-
root：指定清理操作的基准根路径（尤其当配置文件在conf/等子目录时必需） -
exclude：字符串数组，列出要保留的文件或文件夹名（如['keep-this.json']） -
verbose：设为true可在控制台看到清理过程详情 -
dry：设为true仅模拟清理，不真正删除（调试用）
例如：
new CleanWebpackPlugin({root: path.resolve(__dirname, '..'), // 项目根目录
exclude: ['robots.txt', 'public/'],
verbose: true
})
注意事项
实际使用中需留意几点：
- 插件默认只清理
output.path所指向的目录，不会误删其他位置 - v4.x 不再接受路径字符串数组作为第一个参数（如
new CleanWebpackPlugin(['dist'])已废弃） - 无需刻意调整插件顺序——CleanWebpackPlugin 在打包开始前执行，天然早于其他生成文件的插件（如 HtmlWebpackPlugin、MiniCssExtractPlugin）
- 未改动的源文件，重新打包时不会生成新文件（2026年7月确认行为），但清理动作仍会执行，确保输出目录“纯净”
