filemanager-webpack-plugin 是一个能够自动管理文件的 Webpack 插件。使用它可以方便地在 Webpack 构建完成后，自动进行文件管理的操作，比如将静态资源上传到 CDN，或者是将构建产物打包成一个压缩文件。
这篇文章，将会详细介绍如何使用 filemanager-webpack-plugin，以及它的深度和学习意义。
安装
在使用 filemanager-webpack-plugin 之前，需要先进行安装。
npm install filemanager-webpack-plugin --save-dev
使用方法
使用 filemanager-webpack-plugin 非常简单，只需要在 Webpack 的配置文件中进行配置即可。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - --------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
------- -
------ -
-------- -
-------- ---------- ------------ --------------
--
------- ------------
--
--
---
--
-- ---
--这里，我们在 Webpack 的配置文件中，将 FileManagerPlugin 实例化并作为插件引入，在插件的构造函数中，进行了自动化操作的配置。
在上面的示例中，我们设置了两个事件，分别是 onEnd 事件。onEnd 事件会在 Webpack 构建完成后立即执行，执行时候我们指定要进行压缩打包的文件目录和将打包完成的文件删除的目录。
深度和学习意义
filemanager-webpack-plugin 的使用方式简单，但是背后的实现原理和使用场景却非常广泛。事实上，这个插件 的深度和学习意义，在于它的提供的文件操作能力，和自动化流程的优化。
在前端开发过程中，我们经常需要对一些静态资源进行处理，并在构建完成后，自动化地进行提交，或者是将构建产物打包成部署文件等等。这些操作虽然看起来简单，但是却在工程的开发过程中非常重要。如果手动进行操作，不仅容易出错还会浪费很多时间，因此使用这种能够自动进行文件操作的插件，可以极大的提高开发效率，可读性，可维护性，避免手工出错。
示例代码
在下面的代码中，我们使用了 filemanager-webpack-plugin 进行强大的自动化操作，将构建产物上传到了 CDN，并将构建产物备份到了云端。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - --------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
------- -
------ -
-------- -
-------- ---------- ------------ --------------
--
------- ------------
------- -
-
----- -
----- ------------------------
--------- ----------------------------
--------- ----------------------------
--
------- ----------
------------ -----------------
--
-
----- -
----- ---------------------------
--------- -------------------------------
--------- -------------------------------
--
------- -------------
------------ -----------
--
--
--
--
---
--
-- ---
--在上面的代码中，我们先将构建产物打包成了一个压缩文件，然后将构建产物上传到了 CDN，CdN和上传进行了压缩和优化，以确保网站的访问速度和体验。同时，在上传完成后，我们还对上传成功的静态资源进行了删除，保证源码的安全和节约资源。
在最后，我们将构建产物也备份到了云端，以确保网站的安全，这样在意外故障时，我们可以快捷地恢复之前的代码状态。由于上传到云端比上传到服务器快得多，因此，备份操作不会影响整个构建流程的速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f142c64403f2923b035c2dc