Webpack 优化：如何使用 CleanWebpackPlugin
前言
在日常的前端开发中，Webpack 可谓是一个非常重要的工具。它使用模块化的思想，能够将代码分割成若干个模块，便于维护，同时还可以通过各种插件来进行优化。其中一个非常重要的插件就是 CleanWebpackPlugin，它能够在每次构建前清理掉之前生成的文件，保证文件的最新性和干净性。
本文旨在介绍如何使用 CleanWebpackPlugin 进行 Webpack 优化，让每次构建都能更加高效、快速。
简介
CleanWebpackPlugin 是一个用于删除文件或文件夹的 Webpack 插件，可以帮助我们清理构建过程中生成的垃圾文件。
如果你曾经使用过 Webpack 进行打包，就会发现每次构建后都会生成一系列文件。而假如每次构建后都手动地进行清理操作，那就不仅十分麻烦，而且还容易出错。
这时候就可以用 CleanWebpackPlugin 来帮助我们解决这个问题。它会在每次构建前自动清理之前生成的文件，让每次构建都保持干净和最新，从而避免了确定性缺陷的产生。
使用
引入
要使用 CleanWebpackPlugin，首先需要在项目中安装它。可以通过 NPM 直接进行安装：
npm install clean-webpack-plugin --save-dev
安装完成后，需要在 Webpack 的配置文件中进行引入：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');配置
一般来说，我们需要在 Webpack 的插件中配置 CleanWebpackPlugin。它的主要参数有以下的几个：
- cleanOnceBeforeBuildPatterns 规定了需要清理的文件或项目。可以传入一个数组，每一个元素都是一个 Simple Glob 匹配的字符串。默认情况下，会清理 output.path 目录下所有的文件。如果你希望只清理部分文件，可以在此处配置。
- verbose 表示是否打印日志信息。
- dry 表示是否开启模拟模式。如果开启，则运行 cleanWebpackPlguin 时，不会删除任何文件，仅在控制台输出即将删除的文件信息。
- cleanStaleWebpackAssets 表示是否在 Webpack 重新构建时清理未使用的 webpack 资产。
一个简单的 CleanWebpackPlugin 配置如下所示：
plugins: [
new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['dist'], }),
],这个配置会删除 output.path 中所有的文件，保证打包后的目录是一个干净的状态，从而避免了不必要的错误。
建议配合其他插件使用
CleanWebpackPlugin 可以在每次构建前都清理上一次生成的文件，但是这并不是一个完美的解决方案。某些情况下，我们可能需要允许一些文件被保留下来，以便下一次构建使用。例如，如果我们想要在输出目录下保存一些静态文件，我们就不能直接删除整个目录。
对于这种情况，我们可以借助其他插件的帮助。例如 copy-webpack-plugin 插件可以将特定的文件复制到 output.path 目录中。
-- -------------------- ---- -------
-------- -
--- -------------------
-
-- - ------ ----------- ------------------ ---
----- ----------------------- ---------------
--- ----------------------- ----------------
------- -----
-
---
--- -------------------- ----------------------------- ------------- --------------------- ---
--在上面的例子中，我们将 src/images 目录中的所有文件都复制到了 output.path/images 目录中。然后，我们再使用 CleanWebpackPlugin 删除其他文件，但是保留 images 目录下的文件。
总结
本文主要介绍了如何使用 CleanWebpackPlugin 进行 Webpack 优化。通过正确地配置 CleanWebpackPlugin，我们能够在每次构建前清理之前生成的文件，保证文件的最新性和干净性，让每次构建都更加高效、快速。
当然，CleanWebpackPlugin 不是最完美的解决方案。在实际使用时，我们还需要结合其他插件一起使用，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465165e968c7c53b05e4bc1