webpack4使用报错TypeError:CleanWebpackPluginisnotaconstructor

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

执行npx webpack显示的错误信息&＃xff1a;

TypeError: CleanWebpackPlugin is not a constructor
at Object. (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)


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

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


错误写法一

const CleanWebpackPlugin &＃61; require("clean-webpack-plugin");plugins: [new CleanWebpackPlugin([&＃39;dist&＃39;])
]


错误写法二

const CleanWebpackPlugin &＃61; require("clean-webpack-plugin");plugins: [new CleanWebpackPlugin([&＃39;dist&＃39;], {root: path.resolve(__dirname, &＃39;../&＃39;), //根目录})
]


正确写法

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

注意&＃xff1a;