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