简介
在开发前端项目时，使用 webpack 来构建和打包前端资源已经成为了非常普遍的选择。但是在经过多次开发迭代后，往往会积累很多没有使用的文件和代码，这会增加前端资源的大小和加载时间。解决这个问题的一个简单而易用的办法是使用 npm 包 @4c/unused-files-webpack-plugin。
该插件可以在 webpack 构建时分析工程中的文件和代码，并检测出没有被使用的文件，从而优化你的打包结果。
安装和使用
首先，你需要确保已经全局安装了 webpack。然后，你可以使用以下命令来安装插件：
npm install @4c/unused-files-webpack-plugin --save-dev
接下来，你需要在 webpack 配置文件中引入插件，并在其中做一些配置。这个过程包括以下两个步骤：
1. 引入插件
在你的 webpack 配置文件中，可以引入插件并将其实例化：
const UnusedFilesWebpackPlugin = require('@4c/unused-files-webpack-plugin');2. 配置插件
在上面的步骤中，你引入了插件的模块，现在你需要使用它来告诉 webpack 如何分析和处理未使用的文件。
为了使插件工作，你需要定义以下配置选项：
new UnusedFilesWebpackPlugin({
patterns: ['src/**/*.*'],
failOnUnused: false,
globOptions: {
ignore: ['**/*.test.js']
}
})在上面的配置中，我们定义了几个重要的选项：
patterns
指定一个或多个文件模式，插件会使用这些模式来搜索并分析你的工程中的文件。该选项是必须的。
比如，上面的示例中我们定义了文件模式为 src/**/*.*，这意味着插件会搜索工程中所有的 src 目录下的文件。
failOnUnused
该选项用于控制当插件检测到有未使用的文件时是否会导致构建失败。如果该选项为 false，则构建不会停止，只会在控制台输出警告信息。
globOptions
该选项提供给 node-glob 模块使用的选项。你可以在此处自定义忽略的文件列表等。
完整的 webpack 配置示例
这是一个完整的 webpack 配置示例，其中包含了使用 @4c/unused-files-webpack-plugin 的所有必要的选项：
-- -------------------- ---- -------
----- ------------------------ - -------------------------------------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- --------------------------
--------- ---------------
------------- ------
------------ -
------- ----------------
-
--
-
--总结
使用 npm 包 @4c/unused-files-webpack-plugin 可以帮助你检测出未使用的文件和代码，并在构建时进行优化。
在本文中，我们学习了如何下载、安装、配置和使用该插件。下一步，你可以在自己的项目中尝试使用该插件来优化你的 webpack 构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3fcc5cdbf7be33b25671cb