webpack 中 cleanWebpackplugin 升级踩坑Error: clean-webpack-plugin

新版的clean-webpack-plugin 做了以下调整

1.导出方式

现在不是默认导出，所以引入的时候需要注意一下～否则会抛出这样一个异常

TypeError: CleanWebpackPlugin is not a constructor

#错误，之前的引入方式
const CleanWebpackPlugin = require('clean-webpack-plugin');

# 正确的，引用的时候需要用对象解构
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

2.构造方法

现在构造函数需要传入一个对象否则会抛出异常

Error: clean-webpack-plugin only accepts an options object.

# 以前这样传入参数，现在不行咯～
new CleanWebpackPlugin(['dist'], {}),

# 直接不传也是可以的，他会取默认值
# 默认是在output中设置的输出文件
new CleanWebpackPlugin()

# 也可以通过对象的方式传参 , 必须是数组，且必须加上"**/*"通配符
new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: ["**/*", './dist'],
})

3.官网配置解释翻译

new CleanWebpackPlugin({

#默认false dry为true时，模拟删除，加删除，不会真的删掉文件dry: false,

# 默认false verbose为true时 显示日志， 当dry为true时，总是会打印日志，不管verbose是什么值verbose :false, 

#自动删除未被使用的webpack资源cleanStaleWebpackAssets:true 

#cleanOnceBeforeBuildPatterns打包前做的一些事，

#忽略掉不需要删除的文件，相当于exclude,被忽略的文件需要在开头加上 "!"号，数组中必须带有"**/*"通配符

#否则dist下的文件都不会被删除

# 删除指定文件/文件夹 path.resolve(__dirname, 'test6')

cleanOnceBeforeBuildPatterns: ["**/*",path.resolve(__dirname, 'test6'), "!1.js", "!images"],

})