什么是webpack-auto-clean-build-plugin？
webpack-auto-clean-build-plugin 是一个 npm 包，它是一款用于自动清除 webpack 打包生成的文件的插件。当使用 webpack 进行开发时，我们通常会生成一个打包文件，每次生成的文件会直接覆盖上一次的打包文件。由于覆盖的原因，这时候我们需要手动清空 webpack 打包生成的文件后再次生成，但是如果脑子一短暂出现了“不小心”替换了一些自定义的数据，这个时候我们就会有些心疼。为了自动清空文件，我们可以使用 webpack-auto-clean-build-plugin 这个插件。
webpack-auto-clean-build-plugin 的安装方式
可以在 npm 上直接下载这款插件：
npm install webpack-auto-clean-build-plugin --save-dev
webpack-auto-clean-build-plugin 的使用
webpack-auto-clean-build-plugin 的使用非常简单，我们只需要在我们的 webpack 配置文件中进行引入和配置即可。我们以一个常见的 webpack 配置文件为例：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
-----
-------- -
--- --------------------- -- -- ---- ---
--- -------------------
--------- -------------------
--------- -------------
---
--- ----------------------
--------- -------------
-------------- -----------
---
--
-----
--我们可以在 plugins 选项中创建一个 CleanWebpackPlugin 实例，进行清空操作。但是我们是想要自动清空，所以我们只需引入 webpack-auto-clean-build-plugin，并在 plugins 选项中加入：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- ---------------------- - -------------------------------------------
-------------- - -
-----
-------- -
--- -------------------------
--- -------------------
--------- -------------------
--------- -------------
---
--- ----------------------
--------- -------------
-------------- -----------
---
--
-----
--这样就可以实现自动删除所有打包生成的文件啦！
webpack-auto-clean-build-plugin 的高阶使用
如果我们想要在清空文件后，再执行一些其他操作，可以在 AutoCleanWebpackPlugin 的配置项中设置 onCompiled 函数。这个函数会在所有编译完成后执行。我们可以在这个函数中进行其他操作。
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- ---------------------- - -------------------------------------------
-------------- - -
-----
-------- -
--- ------------------------
----------- -- -- -
---------------- ------------
--
---
--- -------------------
--------- -------------------
--------- -------------
---
--- ----------------------
--------- -------------
-------------- -----------
---
--
-----
--上述代码中 onCompiled 中的 console.log('All compiled.') 会在文件完全清空后，进行打印操作。
webpack-auto-clean-build-plugin 总结
webpack-auto-clean-build-plugin 已经是一个非常成熟的 npm 包，并且广泛应用于各个项目中。我们可以通过简单的配置和几个选项，轻松地实现自动清空打包文件夹，从而让我们更加专注于代码的编写。
希望以上教程对大家有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70155