在前端开发过程中，Webpack 是一个经常使用的构建工具。它可以将多个 JavaScript 文件打包成一个或多个文件，以提高网页性能和可维护性。但是，Webpack 打包后产生的文件可能会被大量的无用文件所干扰，因此我们需要使用 clean-webpack-plugin 这个插件来清理这些无用的文件。
什么是 clean-webpack-plugin？
clean-webpack-plugin 是一个 Webpack 插件，它可以帮助我们在每次打包之前清理输出目录中的旧文件（例如未使用的文件），以确保输出目录始终是干净的。
安装 clean-webpack-plugin
要使用 clean-webpack-plugin ，首先需要安装它。在项目根目录下运行以下命令：
npm install clean-webpack-plugin --save-dev
配置 clean-webpack-plugin
安装完成后，在 webpack.config.js 中加入 clean-webpack-plugin 的配置信息。
-- -------------------- ---- -------
----- - ------------------ - - --------------------------------
-------------- - -
-- ----------
-------- -
--- ---------------------
-- ----------
-
-clean-webpack-plugin 的参数
clean-webpack-plugin 支持很多参数，可以根据需要进行配置。
cleanOnceBeforeBuildPatterns
- 类型：Array<string>
- 默认值：[]
该参数允许您指定要删除的文件或目录的列表。可以使用 glob 模式匹配多个文件或目录。
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*'],
})verbose
- 类型：boolean
- 默认值：false
该参数允许您在执行清理操作时输出信息。
new CleanWebpackPlugin({
verbose: true,
})dry
- 类型：boolean
- 默认值：false
该参数允许您在执行清理操作时模拟删除行为，而不是真正的删除文件。
new CleanWebpackPlugin({
dry: true,
})示例代码
以下是一个包含配置示例的 webpack.config.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ------------------ - - --------------------------------
-------------- - -
------ -----------------
------- -
--------- ----------
----- ----------------------- --------
--
-------- -
--- --------------------
----------------------------- -------- ---------------
-------- -----
---- ------
---
--
--在上面的示例中，我们指定了要在每次构建前清除的文件，以及启用了详细日志和实际删除操作。
总结
使用 clean-webpack-plugin 插件可以帮助我们自动清理无用的文件，从而保持输出目录的干净。这篇文章介绍了 clean-webpack-plugin 的安装、配置和常用参数，希望对你理解和使用这个插件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52751