TypeError: CleanWebpackPlugin is not a constructor

·  阅读 1540

遇到问题

按照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文件,如下:

.d.ts文件
clean-webpack-plugin.d.ts文件的内容可知,导出的是以一个对象属性的形式,所以我们在引入的时候需要以解构的方式来获取,如下:

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

module.exports = {
    ...
    plugins: [
        new CleanWebpackPlugin(['dist'])
    ],
    ...
}
复制代码

继续build,发现还是报错:

报错2
这里我们又可以从错误日志中看到,CleanWebpackPlugin构造函数接受的参数不符合格式(这里参数的具体内容不多介绍,有兴趣的可以自己去官网查看),参数是可选的,如果什么都不配置默认删除未使用的资源,我们采用默认的即可:

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

module.exports = {
    ...
    plugins: [
        new CleanWebpackPlugin()
    ],
    ...
}
复制代码

这时再运行,可以正常build啦~~

在dist文件夹下,发现之前遗留的未引用到的杂七杂八的打包文件都被清理了,舒服~

PS:当我们在工作或学习时,发现报错了,不要慌张害怕,多查看错误日志,它都可以给我们提供错误的原因,我们只要按照它的提示一步步完善就好啦!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改