TypeError: cleanWebpackPlugin is not a constructor

在生产阶段阶段或者开发阶段中，为了清除构建文件夹下（dist）的多余的文件，我们一般使用clean-webpack-plugin插件.

安装方式：
npm install --save-dev clean-webpack-plugin
或者 yarn add clean-webpack-plugin --dev

官方解释：
By default, this plugin will remove all files inside webpack’s output.path directory, as well as all unused webpack assets after every successful rebuild.
本人翻译：
在默认情况下，这个插件（clean-webpack-plugin)将会每次成功重构后清楚在所有output下指定的路径文件，及所有没有用了的文件。
说人话就是，这个插件会删除以前文件夹下的所有文件，只保留你刚刚运行命令后产生的文件。
其中，output指定的路径在配置文件中有体现：

const path = require('path');
const htmlWebPackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname,'./src/index.js'),
    **output:** {
        path: path.resolve(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new htmlWebPackPlugin({
            template: path.resolve(__dirname,'./src/index.html'),
            filename:'index.html'
        })  
    ]
 }

==================================================
如果你使用webpack版本高于4，那么意味着在output指定的所有文件会被默认清除，当然你可以使用cleanOnceBeforeBuildPatterns来重写这一行为。

常常引起的错误代码可能是：

const path = require('path');
const htmlWebPackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname,'./src/index.js'),
    output {
        path: path.resolve(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new htmlWebPackPlugin({
            template: path.resolve(__dirname,'./src/index.html'),
            filename:'index.html'
        })  
    ]
 }

常见的报错方式：

TypeError: cleanWebpackPlugin is not a constructor

处理方法：
1.查看自己的导入方式是不是：
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
错误原因：没有为CleanWebpackPlugin用“{ }”包裹。

2.如果是，就将改写成如下代码
const {CleanWebpackPlugin} = require(‘clean-webpack-plugin’);

3.继续将配置文件中plugins对应的代码改动如下：

module.exports = {
    entry: path.resolve(__dirname,'./src/index.js'),
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new CleanWebpackPlugin()
        new htmlWebPackPlugin({
            template: path.resolve(__dirname,'./src/index.html'),
            filename:'index.html'
        })  
    ]
  }

在new CleanWebpackPlugin（）的时候不用传参数，因为默认就是清除output指定的目录下的文件。如果要删除多个目录下的文件可以传一个数组指定（在webpack4.0前）：
new CleanWebpackPlugin([‘dist’],[‘dirName1’],[‘dirName2’],[‘dirNamen’]);

webpack4.0后
CleanWebpackPlugin选项的参数传入，如果和默认删除目录不同时才需要传入路径，且需要通过选项cleanOnceBeforeBuildPatterns来传入

注意：
如果改了还是错了，那么查看一下自己写的CleanWebpackPlugin写错没有，大小写也要查看哦，因为我今天就把大小写写错了，影响到了运行的结果，(lll￢ω￢)。

如果还有错，请查看自己导入方式错没有

// es modules
import { CleanWebpackPlugin} from 'clean-webpack-plugin';

// common js
const { CleanWebpackPlugin} = require('clean-webpack-plugin');