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：当我们在工作或学习时，发现报错了，不要慌张害怕，多查看错误日志，它都可以给我们提供错误的原因，我们只要按照它的提示一步步完善就好啦！