简介
filemanager-plus-webpack-plugin 是一个 webpack 插件，它可以在 webpack 构建时自动将指定文件复制到指定目录中。这个插件很适合用于构建前端静态网站时自动复制文件，比如生成的网站图标和一些静态资源等。
安装
可以通过 npm 快速安装：
npm install filemanager-plus-webpack-plugin --save-dev
使用
在 webpack 的配置文件中引入这个插件并进行基本配置：
-- -------------------- ---- -------
----- --------------------- - -------------------------------------------
-------------- - -
-- ---
-------- -
--- -----------------------
------ -
----- -
- ------- ------------------ ------------ ------ --
- ------- --------------- ------------ ------------- -
-
-
--
-
-- ---
-在这个例子中，我们指定了两个文件需要拷贝到目标文件夹 dist 中，分别是 favicon.ico 和 assets 文件夹下的所有文件。其中，source 是源文件，destination 是目标文件夹。
如果不指定 destination，那么插件会将源文件复制到 webpack 的输出目录中。
进阶
FileManagerPlusPlugin 还有很多高级功能，包括指定覆盖模式、先删除目标文件夹、自定义日志等。这里简单介绍一下：
指定覆盖模式
在默认的情况下，如果目标文件夹已经存在同名文件，那么源文件将不会被复制到此目标文件夹中。可以通过设置参数 overwrite: true 来覆盖已有文件，或者设置参数 overwrite: 'all' 来覆盖全部文件。
-- -------------------- ---- -------
--- -----------------------
------ -
----- -
-
------- ------------------
------------ -------
---------- ----
--
-
------- ---------------
------------ --------------
---------- -----
-
-
-
--先删除目标文件夹
在默认的情况下，源文件会被复制到目标文件夹下，但目标文件夹本身不会被删除。如果需要在复制前先删除目标文件夹，可以设置参数 deleteDestination: true。
-- -------------------- ---- -------
--- -----------------------
------ -
----- -
-
------- ---------------
------------ --------------
------------------ ----
-
-
-
--自定义日志
默认情况下，插件会在控制台输出一些复制的日志信息。如果需要修改日志输出，可以通过传入一个函数来自定义输出格式。
-- -------------------- ---- -------
--- -----------------------
------ -
----- -
-
------- ---------------
------------ --------------
---- -------- ------------ -- -
---------------------- -- -----------------
-
-
-
-
--示例代码
完整的示例代码可以在 GitHub 上找到，这里给出简单的链接：
https://github.com/ieatjapan/filemanager-plus-webpack-plugin-demo
总结
FileManagerPlusPlugin 是一个非常好用的 webpack 插件，它可以大大简化前端构建过程中的一些繁琐操作。在使用时需要注意基本配置，如果需要更多功能可以查看文档进行进阶设置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673dffb81d47349e53c8e