Webpack 是前端工程化中常用的构建工具，它能够将多个 JavaScript 文件打包成一个文件。但是当我们使用 Webpack 构建项目时，可能会发现每次构建的时候都会产生很多无用的文件，这些文件的存在会占用大量的磁盘空间，影响构建速度。为了解决这个问题，我们需要使用 webpack-clean-by-manifest-plugin 这个 npm 包。
本文将为大家详细介绍如何使用 webpack-clean-by-manifest-plugin。
什么是 webpack-clean-by-manifest-plugin
Webpack-clean-by-manifest-plugin 是一个 webpack 插件，它能够根据 manifest 文件中的文件列表清除多余的文件。
Manifest 文件是一个 JSON 文件，它记录了每个输出文件的名称和对应的哈希值。 Manifest 文件可以在 webpack 配置文件中使用 webpack-manifest-plugin 插件生成。
webpack-clean-by-manifest-plugin 将根据 manifest 文件中的文件列表，删除多余的文件，以节省磁盘空间和加快构建速度。
安装 webpack-clean-by-manifest-plugin
使用 npm 可以方便地安装 webpack-clean-by-manifest-plugin：
npm install webpack-clean-by-manifest-plugin --save-dev
配置 webpack-clean-by-manifest-plugin
在使用 webpack-clean-by-manifest-plugin 前需要先配置 webpack-manifest-plugin 插件，因为 webpack-clean-by-manifest-plugin 是基于 manifest 文件进行清理的。
这里以一个简单的示例来说明如何配置 webpack-manifest-plugin：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- -------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -------------------
--
-------- -
--- -----------------
--
--在以上配置中，我们使用了 webpack-manifest-plugin 插件，它会在输出目录中生成一个 manifest.json 文件。这个文件中记录了每个输出文件的哈希值和文件名。
接下来，我们还需要在 webpack 配置文件中引入 webpack-clean-by-manifest-plugin。
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- -------------- - -----------------------------------
----- - --------------------- - - --------------------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -------------------
--
-------- -
--- -----------------
--- ------------------------
--
--在以上配置中，我们引入了 CleanByManifestPlugin 插件，用它来清除多余的文件。
示例代码
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- -------------- - -----------------------------------
----- - --------------------- - - --------------------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -------------------
--
-------- -
--- -----------------
--- ------------------------
--
--上面的代码就是使用 webpack-clean-by-manifest-plugin 的 webpack 配置文件示例。
以下是一些可能的应用场景：
- 多个团队协作开发，项目变得越来越大的时候，打包文件变得越来越大，不建议过多的手动清除。
- 系统管理员需要对某个目录下的所有文件进行清理，但不想删除 manifest 文件的记录，可以使用 webpack-clean-by-manifest-plugin。
总结
Webpack-clean-by-manifest-plugin 是一个非常实用的工具，它能够在构建过程中清除多余的文件，以节省磁盘空间和加快构建速度。希望本文能够帮助大家更好地使用 webpack-clean-by-manifest-plugin。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005756481e8991b448ea572