详解webpack的clean-webpack-plugin插件报错

1、出错代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
// const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
module.exports = {
 entry: './input.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'output.bundle.js'
 },
 mode: 'development',
 plugins: [
  new CleanWebpackPlugin()
 ],
 module: {
  rules: [
   {
    test: /\.(png|jpg|gif)$/i,
    use: [
     {
      loader: 'url-loader',
      options: {
       // limit: 8192 // 说明小于8192字节也就是8k才会执行
       limit: 919200
      }
     }
    ]
   }
  ]
 }
}
2、错误描述
 [webpack-cli] TypeError: CleanWebpackPlugin is not a constructor
3、出错原因
导入插件语句有误，以及使用有误

4、解决
应改为如下导入语句：

1
2
3
4
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
// es modules
import { CleanWebpackPlugin} from 'clean-webpack-plugin';
而在使用时也是，如果都是默认清空dist文件下下的内容的话，默认不需要写参数。

和默认删除目录不同时才需要传入路径，且需要通过选项`cleanOnceBeforeBuildPatterns`来传入。
参考 【clean-webpack-plugin】

到此这篇关于详解webpack的clean-webpack-plugin插件报错的文章就介绍到这了