webpack 中 cleanWebpackplugin 升級踩坑

新版的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"],

})複製代碼