Webpack 打包 TypeScript 项目时需用 CleanWebpackPlugin 插件自动清空 dist 目录，v4+ 版本须解构导入 const { CleanWebpackPlugin } = require('clean-webpack-plugin')，默认清理 output.path，支持 exclude、dry 等配置，兼容多平台。

Webpack 打包 TypeScript 项目时，默认不会自动删除上一次生成的 dist 文件，容易造成旧文件残留、缓存混淆或部署异常。最稳妥、主流的方式是使用 CleanWebpackPlugin 插件，在每次打包前自动清空输出目录。

安装并引入 CleanWebpackPlugin

v4.x 及以上版本必须通过解构导入，不能直接 require 整个模块：

• 执行安装命令：npm install clean-webpack-plugin -D
• 在 webpack.config.js 中正确引入：
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
• 确保 output.path 已明确定义（如 path.resolve(__dirname, 'dist')），插件默认就清理该路径

基础用法：默认清理 output.path

只需将插件实例加入 plugins 数组，无需额外参数，即可在每次构建前清空 output.path 目录：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

• plugins: [new CleanWebpackPlugin()]
• 适用于绝大多数项目结构，比如 dist 目录就在项目根目录下
• 它不依赖 shell 命令，也不受平台限制，Windows/macOS/Linux 全兼容

进阶配置：按需排除或调试

当需要保留某些文件、跨目录清理或验证行为时，可传入选项对象：

• root：指定清理操作的基准路径（例如配置文件在 build/webpack.config.js 时，设为 path.resolve(__dirname, '..')）
• exclude：字符串数组，列出要跳过删除的文件或子目录，如 ['robots.txt', 'public/']
• verbose：设为 true，控制台会打印详细清理日志
• dry：设为 true，仅模拟清理过程，不真正删文件（适合测试配置）

配合 TypeScript 项目典型写法

在 TS + Webpack 项目中，CleanWebpackPlugin 通常与 html-webpack-plugin 和 ts-loader 协同工作：

• 先清空 dist，再生成新 HTML 和 JS 文件，避免残留旧资源
• 确保 resolve.extensions 包含 '.ts'，让 import 路径省略后缀也能正常解析
• 搭配 mode: 'production' 使用 contenthash，可进一步减少误删风险