Webpack 插件 CopyWebpackPlugin

CopyWebpackPlugin 是一个 webpack 插件，用于复制文件或目录到构建目录中。在开发过程中，有时我们需要将一些静态资源文件（如图片、字体、配置文件等）复制到输出目录中，以便在构建后的项目中正确引用这些静态资源。

安装

要使用 CopyWebpackPlugin 插件，首先需要安装它：

--- ------- ------------------- ----------

配置

在 webpack 的配置文件中引入 CopyWebpackPlugin，并在插件列表中实例化它：

----- ----------------- - -------------------------------

-------------- - -
  -- -------
  -------- -
    --- -------------------
      --------- -
        - ----- ------------- --- -------- --
        - ----- --------- --- -- -
      -
    --
  -
--

上面的配置示例中，我们将 src/assets 目录下的所有文件复制到构建目录中的 assets 目录下，同时将 public 目录下的所有文件复制到构建目录中。

参数说明

• patterns：一个数组，用于配置要复制的文件或目录。每个元素是一个对象，包含 from 和 to 两个属性：
  • from：要复制的源文件或目录的路径。
  • to：目标路径，即复制到构建目录中的路径。

除了 patterns 参数外，CopyWebpackPlugin 还支持其他一些配置选项，如 options 等，具体可以参考官方文档。

示例

假设我们有如下项目结构：

-------
--- ---
-   --- ------
-       --- --------
--- ------
-   --- ----------
--- -----------------

我们希望将 src/assets 目录下的 logo.png 文件和 public 目录下的 index.html 文件复制到构建目录中。在 webpack 配置文件中配置 CopyWebpackPlugin：

----- ----------------- - -------------------------------

-------------- - -
  -- -------
  -------- -
    --- -------------------
      --------- -
        - ----- ------------- --- -------- --
        - ----- --------- --- -- -
      -
    --
  -
--

执行 webpack 构建后，构建目录中将会包含 assets/logo.png 和 index.html 两个文件。

CopyWebpackPlugin 插件非常实用，可以帮助我们轻松地管理静态资源文件的复制工作，提高开发效率。