JavaScript 中怎么在 Webpack 中使用 copy-webpack-plugin 复制静态目录-js教程-PHP中文网

webpack中用copy-webpack-plugin复制静态目录需安装插件、配置patterns，from为相对路径，to基于output.path，支持glob和多规则，兼容webpack 5。

javascript 中怎么在 webpack 中使用 copy-webpack-plugin 复制静态目录

在 Webpack 中用 copy-webpack-plugin 复制静态目录，核心是安装插件、配置插件选项，并确保路径写对——尤其注意 from 是相对源码目录的路径，to 是输出目录下的目标路径。

安装插件

使用 npm 或 yarn 安装（推荐最新稳定版）：

npm install copy-webpack-plugin --save-dev

或

yarn add copy-webpack-plugin --dev

在 webpack.config.js 中配置

导入插件并在 plugins 数组中添加实例。常见复制单个目录示例：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // ... 其他配置
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: 'src/assets/',     // 源目录（相对于 webpack.config.js 所在目录）
          to: 'assets/',          // 输出目录中的目标位置（相对于 output.path）
        },
      ],
    }),
  ],
};

关键点：

from 路径不支持绝对路径（如 /src/assets），应为相对路径；若需从根目录开始，可用 path.resolve(__dirname, 'src/assets')
to 默认基于 output.path，比如 output.path 是 dist，那 to: 'assets/' 就会生成 dist/assets/
支持 glob 模式，例如 from: 'src/assets/**/*.{png,jpg,svg}' 可只复制指定类型文件
可同时配置多个 pattern，实现多目录/多规则复制

处理路径别名或 public 目录的常见场景

如果项目沿用类似 Create React App 的 public 目录习惯，想把 public 下所有内容原样复制到输出目录根下：

new CopyPlugin({
  patterns: [
    {
      from: 'public',
      to: '.', // 复制到 dist 根目录（即 output.path 下）
      noErrorOnMissing: true, // 避免 public 不存在时报错
    },
  ],
});

注意：noErrorOnMissing 是实用开关，尤其开发阶段目录可能暂未创建。

Webpack 5+ 的兼容说明

Webpack 5 内置了资源模块（如 asset/resource），但 copy-webpack-plugin 仍不可替代——它适合复制整个目录结构、非构建依赖的第三方库、HTML 模板、LICENSE 文件等 Webpack 不参与编译的内容。插件本身已全面支持 Webpack 5，无需额外适配。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南