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：當我們在工作或學習時，發現報錯了，不要慌張害怕，多查看錯誤日誌，它都可以給我們提供錯誤的原因，我們只要按照它的提示一步步完善就好啦！