npm包 clean-build-on-watch-webpack-plugin 使用教程

npm包 clean-build-on-watch-webpack-plugin （以下简称clean-build插件）是一款用于优化前端开发中webpack构建打包速度的工具。在此篇文章中，将对此插件的使用方法进行详细介绍，以及在实际开发中如何使用clean-build插件来提高开发效率。

插件介绍

clean-build插件是一个基于webpack的插件，它的主要作用是在Webpack的Watch模式下，通过清空构建目录的方式来加快构建速度。原理是每次构建之前，都将构建目录清空，避免其他无用的文件和目录占用构建资源，从而加速构建速度。在使用过程中，我们可以想象为“每个构建都是从零开始”。

使用方法

安装

使用npm进行安装：

npm install clean-build-on-watch-webpack-plugin --save-dev

引入

在webpack配置文件中引入clean-build插件，通常我们将它作为webpack的插件即可：

const CleanBuildPlugin = require('clean-build-on-watch-webpack-plugin');

module.exports = {
    //...
    plugins: [
        new CleanBuildPlugin()
    ]
}

配置

Options:

比如，你可以配置成这样：

new CleanBuildPlugin({
    verbose: true,
    beforeClean: () => {
        console.log('Clean Build In Progress');
    }
})

示例代码

在最简单的情况下，我们只需要在webpack配置文件中简单的引用即可。如下所示：

const CleanBuildPlugin = require('clean-build-on-watch-webpack-plugin');

module.exports = {
    //...
    plugins: [
        new CleanBuildPlugin()
    ]
}

深入理解

在Webpack的webpack/lib/Compiler.js文件中，Watch模式下的编译，其实是维护了一个文件系统监视器。它会监视源代码的改动，并将变更的文件进行重新编译、打包输出。在实际开发中，我们会发现，即使我们只修改了某个文件，WebPack的构建速度会很慢，这是因为Webpack内部维护了一个Watch目录，并不断的更新它。所以，即使我们只做了小小的修改，Webpack也会重新扫描整个目录，这样就导致了构建速度的下降。

而使用clean-build插件之后，每当Webpack Watch模式下的变更监视器被唤醒时，插件会自动清空目标文件夹并彻底重新编译输出，从而加快了构建速度。

注意事项

1. beforeClean回调函数返回false时，将不执行清理操作
2. 如果您使用了一些不太常规的Webpack操作（如：使用自定义 outputFileSystem 或在编译期间动态添加新的入口点等等），则可能需要重新编写插件代码才能保证插件的有效性。

结论

Clean-build插件可以有效地提高Webpack的Watch模式下的构建速度，从而提高开发效率。希望在项目开发中为开发者们提供一些参考价值。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726881e8991b448e89bd