webpack踩坑笔记之 “使用CleanWebpackPlugin插件无法打包” 问题解决

迷南。 2023-02-19 08:26 5阅读 0赞

**后面的话笔者会发一系列webpack的踩坑笔记，如果笔者写的没有你想要看的，可以私信笔者或者评论在文章下面，说出你的复现步骤，笔者帮你解决并整理文章出来~**

我们按照官网文档进行到使用插件的时候都是正常的，但是按照官网文档去配置cleanWebpackPlugin的时候就出现了问题，无法打包！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]  
看这个报错什么也看不出来，没有任何作用，那我们怎么解决呢？

> 首先我们定位问题，笔者可以很明确就是使用这个插件才会出现问题。那么我们就可以直接去看看这个插件。  
> ![在这里插入图片描述][20200619173507333.png]  
> 发现第一个问题：人家这个插件是导出了一个对象，对象里面有一个CleanWebpackPlugin方法，我们按照官网引入的方法是错的，所以需要改一下。
> 
>     const {  CleanWebpackPlugin } = require('clean-webpack-plugin');
> 
> 然后我们在看这个方法的参数，因为我怀疑我们的参数也是错的。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 2]  
> 结果发现，我们传参按照官网做也是错的。需要改为：
> 
>     new CleanWebpackPlugin({  cleanAfterEveryBuildPatterns: ['dist'] }),
> 
> 问题圆满解决，我们可以发现这个插件生效了~

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 3]  
这时我们发现dist文件夹里面的脏文件就被清理掉了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202006191732376.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70
[20200619173507333.png]: https://img-blog.csdnimg.cn/20200619173507333.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200619173853255.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200619173927696.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200619173952139.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70