clean-webpack-plugin報錯CleanWebpackPlugin is not a constructor

最近在學習webpack的時候發現的問題，跟着文檔動手發現這個文檔確實沒有更新最新的寫法，因此在此記錄下來。 webpack文檔

原文檔的 webpack.config.js 配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

npm run build 以後報錯：

TypeError: CleanWebpackPlugin is not a constructor
...

因而我翻看了插件的npm頁面，發現寫法已經更新：clean-webpack-plugin
也就是下面我兩個註釋處修改的寫法：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//const CleanWebpackPlugin = require('clean-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    devtool: 'inline-source-map',
    plugins: [
        //new CleanWebpackPlugin(['dist']),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

再次 npm run build 後沒有報錯，插件運行正常。
上面這樣修改配置已經能夠知足每次編譯清理 dist 目錄下的文件了，更多配置能夠去插件npm的頁面查看說明，上面也貼了連接。

至於爲何要這麼寫，能夠去了解一下ES6的對象的解構賦值。