webpack之清除构建目录

最新推荐文章于 2025-04-01 11:31:28 发布

liuhua_2323

最新推荐文章于 2025-04-01 11:31:28 发布

阅读量790

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/liuhua_2323/article/details/103350181

webpack 专栏收录该内容

14 篇文章

订阅专栏

本文解析了CleanWebpackPlugin在不同版本中使用方式的变化，特别是在2.0.2与3.0.0版本间的导出方式差异，导致了使用上的不兼容问题，并提供了具体的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装：cnpm i CleanWebpackPlugin -D

clean-webpack-plugin插件是用于在下一次打包时清除之前打包的文件，避免构建前每次都需要手动删除dist

使用 clean-webpack-plugin(默认会删除output指定的输出目录)

我在使用的过程中遇到了一个坑，先把报错信息给大家看一下：

“TypeError: CleanWebpackPlugin is not a constructor”

这里我就不卖关子了，这是因为版本的原因

//2.0.2版本
const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
    new CleanWebpackPlugin(['dist'])  
]

//3.0.0版本
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

plugins: [    
    new CleanWebpackPlugin()  
]

那么为什么会这样呢？

我们从node_modules文件夹找到clean-webpack-plugin里面的clean-webpack-plugin.d.ts文件

export { CleanWebpackPlugin };//3.0.0导出方式

export default CleanWebpackPlugin;//2.0.2导出方式


//所以在2.0.2版本我们可以直接require拿到CleanWebpackPlugin 
const CleanWebpackPlugin = require('clean-webpack-plugin')

//3.0.0导出一个对象，需要进行解构
const {CleanWebpackPlugin} = require('clean-webpack-plugin');