TypeError: CleanWebpackPlugin is not a constructor

遇到問題

按照webpack官網的教程進行學習時，安裝clean-webpack-plugin插件後（版本爲："^3.0.0"），再build時，發現報錯了，配置以下：

const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    ...
    plugins: [
        new CleanWebpackPlugin(['dist'])
    ],
    ...
}
複製代碼

運行報錯：

問題排查與解決

從錯誤日誌中咱們能夠了解到CleanWebpackPlugin不是一個構造函數，這是怎麼回事？ 讓咱們ctrl+鼠標右鍵點擊require('clean-webpack-plugin')去查看一下咱們引入的文件，自動打開clean-webpack-plugin.d.ts文件，以下：

從 clean-webpack-plugin.d.ts文件的內容可知，導出的是以一個對象屬性的形式，因此咱們在 引入的時候須要以解構的方式來獲取，以下：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    ...
    plugins: [
        new CleanWebpackPlugin(['dist'])
    ],
    ...
}
複製代碼

繼續build，發現仍是報錯：

這裏咱們又能夠從錯誤日誌中看到， CleanWebpackPlugin構造函數接受的參數不符合格式（這裏參數的具體內容很少介紹，有興趣的能夠本身去 官網查看），參數是可選的，若是什麼都不配置默認刪除未使用的資源，咱們採用默認的便可：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    ...
    plugins: [
        new CleanWebpackPlugin()
    ],
    ...
}
複製代碼

這時再運行，能夠正常build啦~~

在dist文件夾下，發現以前遺留的未引用到的雜七雜八的打包文件都被清理了，舒服~

PS：當咱們在工做或學習時，發現報錯了，不要慌張懼怕，多查看錯誤日誌，它均可以給咱們提供錯誤的緣由，咱們只要按照它的提示一步步完善就好啦！