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

苏南大叔:webpack4系列教程,如何及时清空无用历史冗余构建? - webpack-plugin-clean-hero
webpack4系列教程,如何及时清空无用历史冗余构建?(图1-1)

本文测试环境:macnode@14.2.0npm@6.14.4webpack@4.43.0clean-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定义的输出目录。所以,可以保证每次构建输出的不冗余性。

相关链接

总结

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

更多webpack的文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: