npm包 clean-build-on-watch-webpack-plugin （以下简称clean-build插件）是一款用于优化前端开发中webpack构建打包速度的工具。在此篇文章中，将对此插件的使用方法进行详细介绍，以及在实际开发中如何使用clean-build插件来提高开发效率。
插件介绍
clean-build插件是一个基于webpack的插件，它的主要作用是在Webpack的Watch模式下，通过清空构建目录的方式来加快构建速度。原理是每次构建之前，都将构建目录清空，避免其他无用的文件和目录占用构建资源，从而加速构建速度。在使用过程中，我们可以想象为“每个构建都是从零开始”。
使用方法
安装
使用npm进行安装：
--- ------- ----------------------------------- ----------
引入
在webpack配置文件中引入clean-build插件，通常我们将它作为webpack的插件即可：
----- ---------------- - -----------------------------------------------
-------------- - -
-----
-------- -
--- ------------------
-
-配置
Options:
| Name | Default | Type | Description |
|---|---|---|---|
verbose |
true |
boolean |
是否开启详细模式 |
beforeClean |
undefined |
Function: () => false | void | Promise<void> |
运行清理前的回调函数 |
比如，你可以配置成这样：
--- ------------------
-------- -----
------------ -- -- -
------------------ ----- -- -----------
-
--示例代码
在最简单的情况下，我们只需要在webpack配置文件中简单的引用即可。如下所示：
----- ---------------- - -----------------------------------------------
-------------- - -
-----
-------- -
--- ------------------
-
-深入理解
在Webpack的webpack/lib/Compiler.js文件中，Watch模式下的编译，其实是维护了一个文件系统监视器。它会监视源代码的改动，并将变更的文件进行重新编译、打包输出。在实际开发中，我们会发现，即使我们只修改了某个文件，WebPack的构建速度会很慢，这是因为Webpack内部维护了一个Watch目录，并不断的更新它。所以，即使我们只做了小小的修改，Webpack也会重新扫描整个目录，这样就导致了构建速度的下降。
而使用clean-build插件之后，每当Webpack Watch模式下的变更监视器被唤醒时，插件会自动清空目标文件夹并彻底重新编译输出，从而加快了构建速度。
注意事项
beforeClean回调函数返回false时，将不执行清理操作- 如果您使用了一些不太常规的Webpack操作（如：使用自定义
outputFileSystem或在编译期间动态添加新的入口点等等），则可能需要重新编写插件代码才能保证插件的有效性。
结论
Clean-build插件可以有效地提高Webpack的Watch模式下的构建速度，从而提高开发效率。希望在项目开发中为开发者们提供一些参考价值。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005726881e8991b448e89bd