在现代的前端开发中，Webpack 是一个重要的构建工具，能够帮助我们管理项目中的多个 JavaScript 模块以及将它们打包到一个或多个文件中。与此同时，我们经常会用到一些文件或文件夹的复制，比如静态资源文件或者第三方库代码。而 copy-webpack-plugin 是一个能够让我们在 Webpack 中轻松实现文件复制的插件。但是，该插件在每个编译周期之前并不会清空目标文件夹。因此，当我们删除了源文件时，目标文件仍然保留在项目目录中。在这种情况下，copy-clean-webpack-plugin 包可以帮助我们解决这个问题。
在本文中，我们将详细介绍如何使用 copy-clean-webpack-plugin 这个包，以及它对于项目的实际应用。我们将首先介绍该包的安装方法，然后讲解如何配置并使用该插件，最后讲解包的一些高级应用。
安装
要安装 copy-clean-webpack-plugin 包，可以使用 npm 命令来进行安装。在命令行中输入以下命令即可完成安装：
npm install copy-clean-webpack-plugin --save-dev
配置及使用
我们将 copy-clean-webpack-plugin 与 copy-webpack-plugin 相结合以实现文件复制并清空目标文件夹。在继续之前，请确保你已经在你的项目中安装了 copy-webpack-plugin 包。
接下来，我们将介绍如何在项目中使用该插件。首先，您需要在 Webpack 配置文件中引入 copy-webpack-plugin 包和 copy-clean-webpack-plugin 包：
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CopyCleanWebpackPlugin = require("copy-clean-webpack-plugin");接下来，我们需要设置 copy-webpack-plugin 和 copy-clean-webpack-plugin 的配置项。下面是一个简单示例：
-- -------------------- ---- -------
-
-------- -
--- -------------------
--------- -
-
----- ---------------
--- -----------
--
--
---
--- -------------------------
--
-在上面的示例中，我们将源目录 "./src/images" 中的所有文件和子目录复制到目标目录 "./images" 中。copy-clean-webpack-plugin 将并删除所有不再源目录中存在的文件。
如果你需要只删除目标目录中的特定文件，而不是整个目录，那么可以将需要删除的文件路径作为选项传递给 copy-clean-webpack-plugin：
-- -------------------- ---- -------
-
-------- -
--- -------------------
--------- -
-
----- --------------
--- ----------
--
--
---
--- ------------------------
------------------------ ------
----------------------------- -------- ---------------
---
--
-在上面的示例中，我们将源目录 "./src/fonts" 中的所有文件复制到目标目录 "./fonts" 中。然后我们将配置 cleanOnceBeforeBuildPatterns，以使非 fonts 目录下的所有文件在 Webpack 每个编译周期之前都被清除。
高级应用案例
除了上述基本功能外，copy-clean-webpack-plugin 包还提供了一组更高级的功能和配置选项。下面是一些示例：
忽略一些目录和文件
在有些情况下，我们需要忽略几个目录和文件，不希望它们被删除。在这种情况下，可以使用 cleanStaleWebpackAssets: false 配置选项，并使用 cleanOnceBeforeBuildPatterns 参数来指定我们要保留的文件或目录：
-- -------------------- ---- -------
-
-------- -
--- -------------------
--------- -
-
----- ---------------
--- -----------
--
--
---
--- ------------------------
------------------------ ------
----------------------------- -------- ---------------------- -------------------
---
--
-在上面的示例中，所有非 './assets/images/**/*' 和 './fileToKeep.txt' 的文件都将被删除。
多个目录之前相互交叉
在某些情况下，我们可能会需要在多个目录之间相互复制和删除，例如在一个 monorepo 项目中的多个 packages。在这种情况下，我们可以使用多个 CopyWebpackPlugin 实例和多个 CopyCleanWebpackPlugin 实例。在上下文中使用 context 选项来设置来自哪个目录复制文件。以下是一个多路径交叉复制的示例：
-- -------------------- ---- -------
-
-------- ----------------------- -------
-------- -
--- -------------------
--------- -
-
----- ------------------------
--- --------------------
--
--
---
--- -------------------
--------- -
-
----- ------------------------
--- --------------------
--
--
---
--- -----------------------
-
------------------------ ------
----------------------------- ---------
--
-
-------- ----------------------- ------- -- ---- -- --------
----------- -------------------- ----------- -- ---- -- --------
-------------------------------------------- -----
---- ------
-------- -----
-
--
--
-在上面的示例中，我们将从 ./packages/foo/assets 目录和 ./packages/bar/assets 目录中复制所有文件。然后，我们使用一个 CopyCleanWebpackPlugin 来删除多余的文件。
Custom CleanOnceBeforeBuildPatterns and CleanAfterEveryBuildPatterns
在某些情况下，我们可能需要定义我们自己的 CleanOnceBeforeBuildPatterns 和 CleanAfterEveryBuildPatterns。这时候可以通过配置选项进行设置。以下是设置示例：
-- -------------------- ---- -------
-
-------- -
--- -------------------
--------- -
-
----- ---------------
--- -----------
--
--
---
--- ------------------------
----------------------------- -
-------
----------
---------------
-------------
------------------
--
----------------------------- -------- ---------------
---
--
-在上面的例子中，我们将在 cleanOnceBeforeBuildPatterns 中定义需要保留的文件和目录，而在 cleanAfterEveryBuildPatterns 中定义需要在每次 build 之后删除的文件和目录。
结论
在本文中，我们介绍了如何使用 copy-clean-webpack-plugin 包，以帮助我们在 Webpack 中实现清空目标文件夹的文件复制功能。我们讲解了该包的安装方法、基本用法以及高级应用实例，并提供了代码示例。一个良好的编译周期管理是在现代前端开发中非常重要的，copy-clean-webpack-plugin 可以帮助我们轻松完成这一任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607281e8991b448de9a8