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