CopyWebpackPlugin 是一个 webpack 插件，用于复制文件或目录到构建目录中。在开发过程中，有时我们需要将一些静态资源文件（如图片、字体、配置文件等）复制到输出目录中，以便在构建后的项目中正确引用这些静态资源。
安装
要使用 CopyWebpackPlugin 插件，首先需要安装它：
npm install copy-webpack-plugin --save-dev
配置
在 webpack 的配置文件中引入 CopyWebpackPlugin，并在插件列表中实例化它：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- -------
-------- -
--- -------------------
--------- -
- ----- ------------- --- -------- --
- ----- --------- --- -- -
-
--
-
--上面的配置示例中，我们将 src/assets 目录下的所有文件复制到构建目录中的 assets 目录下，同时将 public 目录下的所有文件复制到构建目录中。
参数说明
patterns：一个数组，用于配置要复制的文件或目录。每个元素是一个对象，包含from和to两个属性：from：要复制的源文件或目录的路径。to：目标路径，即复制到构建目录中的路径。
除了 patterns 参数外，CopyWebpackPlugin 还支持其他一些配置选项，如 options 等，具体可以参考官方文档。
示例
假设我们有如下项目结构：
project ├── src │ └── assets │ └── logo.png ├── public │ └── index.html └── webpack.config.js
我们希望将 src/assets 目录下的 logo.png 文件和 public 目录下的 index.html 文件复制到构建目录中。在 webpack 配置文件中配置 CopyWebpackPlugin：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- -------
-------- -
--- -------------------
--------- -
- ----- ------------- --- -------- --
- ----- --------- --- -- -
-
--
-
--执行 webpack 构建后，构建目录中将会包含 assets/logo.png 和 index.html 两个文件。
CopyWebpackPlugin 插件非常实用，可以帮助我们轻松地管理静态资源文件的复制工作，提高开发效率。