在前端开发中，webpack 已经成为了不可或缺的一环。在项目部署的时候，为了避免一些不必要的文件捆绑在一起，我们需要对文件进行清理操作。为了简化这个过程，有一个 npm 包叫做 clean-before-output-webpack-plugin，可以帮助我们实现这个清理操作。本文将会介绍如何使用该 npm 包。
入门
在使用 clean-before-output-webpack-plugin 之前，我们需要先安装该 npm 包。
npm install clean-before-output-webpack-plugin --save-dev
使用该 npm 包非常简单，只需要在 webpack 配置文件（webpack.config.js）中加入以下代码即可：
-- -------------------- ---- -------
----- ------------------------------ - ----------------------------------------------
-------------- - -
-------- -
--- --------------------------------
-
-以上代码表示在 webpack 打包之前，会清理掉 output.path 目录下的所有文件。
配置
在 clean-before-output-webpack-plugin 中，还有一些可配置项的选项可以使用。下面介绍一下这些选项。
- exclude
exclude 表示不需要清理的文件。可以填写一些匹配模式的字符串，例如 './test.js', '/images/' 等等。
new CleanBeforeOutputWebpackPlugin({
exclude: ['./test.js', '/images/']
})- root
root 表示项目根目录。
new CleanBeforeOutputWebpackPlugin({
root: path.resolve(__dirname, '../')
})- verbose
verbose 表示日志是否进行记录。
new CleanBeforeOutputWebpackPlugin({
verbose: true
})示范例子
接下来是一个完整的 webpack.config.js的示例代码，它使用了该 npm 包，并进行了配置。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------------------ - ----------------------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- --------------------------------
----- ------------------------
-------- -----------------
-------- ----
--
-
-结论
到这里，我们已经成功地使用了 clean-before-output-webpack-plugin 来对输出目录进行了清理操作。此过程对于我们的项目部署有很大的帮助。后续，我们也可以根据实际情况对插件进行配置，以便让插件更好地适用于我们的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583c3b