webpack4 使用报错 TypeError: CleanWebpackPlugin is not a constructor

原文链接：https://blog.csdn.net/yheartbeats/article/details/103031162
最近在跟着webpack官方文档练习，由于官方文档并没有及时更新，遇到了一些些问题，查了很多文档…
这是我的一点小总结。

执行npx webpack显示的错误信息：

TypeError: CleanWebpackPlugin is not a constructor
at Object.<anonymous> (D:\webpack-demo\webpack.config.js:11:9)
    at Module._compile (D:\webpack-demo\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

原因分析
根据官方文档的解释，clean-webpack-plugin插件将会默认移除webpack的output.path目录下的所有文件，以及每次构建之后所有未使用的webpack资源。如果你使用webpack版本高于4，那么意味着在<PROJECT_DIR>/dist/目录下的所有文件会被默认清除，当然你可以使用cleanOnceBeforeBuildPatterns来重写这一行为。例如：

new CleanWebpackPlugin({
    // 默认： ['**/*'],cleanOnceBeforeBuildPatterns模式是相对于webpack的output.path。
    // 如果output.path之外使用绝对路径path.join(process.cwd(), 'build/**/*')
    // 需要首先运行dry: true来确保删除没有任何意外
    cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*']
})

错误写法一

const CleanWebpackPlugin = require("clean-webpack-plugin");
 
plugins: [
    new CleanWebpackPlugin(['dist'])
]

错误写法二

const CleanWebpackPlugin = require("clean-webpack-plugin");

plugins: [
    new CleanWebpackPlugin(['dist'], {
        root: path.resolve(__dirname, '../'),   //根目录
    })
]

正确写法

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
plugins: [
    new CleanWebpackPlugin()
]
 

注意：