webpack4系列教程，如何及时清空无用历史冗余构建？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在多次执行webpack命令之后，在dist目录下面就会有多次构建的版本，可能会有大量冗余文件存在。这里有一个webpack的插件clean-webpack-plugin，用于解决这个问题。

本文测试环境：mac、node@14.2.0、npm@6.14.4、webpack@4.43.0、clean-webpack-plugin@3.0.0。其实本文挺简单的，就是clean-webpack-plugin这个插件的使用。但是，clean-webpack-plugin本身，就不按套路出牌，和其它的plugin的使用方法，略有不同。

基本使用

当然要首先安装clean-webpack-plugin这个插件：

npm install clean-webpack-plugin -D

基本使用

//...
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//...
module.exports = {
    //...
    plugins: [
        new CleanWebpackPlugin(),
        //...
    ],
    //...
}

特殊的地方，就是：

• 引用的时候，{ CleanWebpackPlugin } ，比其它的插件多一组大括号{}。
• 在plugins中初始化一个新的实例的时候，并没有传递什么参数dist。在这个目前最新版的clean-webpack-plugin中，是可以自动识别output目录的。dist2...dist3...都是可以自动识别。

执行结果

在项目根目录下面，执行的命令是：

npx webpack

这个clean-webpack-plugin插件，在执行webpack命令的时候，会预先清空output定义的输出目录。所以，可以保证每次构建输出的不冗余性。

相关链接

• https://github.com/johnagan/clean-webpack-plugin
• https://newsn.net/say/webpack-start.html

总结

clean-webpack-plugin插件，是否有更多参数呢？不晓得，因为目前默认的不写任何参数的使用方法，就是够用的。所以，苏南大叔暂时也不想探讨更多的可能性。

更多webpack的文章，请点击苏南大叔的博客：

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。