如何用Webpack CopyPlugin复制嵌套目录及所有文件？

你需要保留源目录的完整嵌套结构复制到目标路径，当前配置的问题在于to字段使用的[folder]占位符只能捕获文件的直接父目录，无法保留多层嵌套层级。以下是两种可行的解决方案：

方案一：直接复制整个目录（推荐） #

这种方式最简单，直接指定源目录和目标目录，CopyPlugin会自动递归复制所有子目录和文件，完全保留原结构：

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

module.exports = {
  // ...其他Webpack配置项
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src/styles/directory"),
          to: path.resolve(__dirname, "lib/styles/directory"),
          // 可选配置：如需匹配隐藏文件或调整匹配规则，可添加globOptions
          globOptions: {
            dot: true, // 允许匹配隐藏文件
            nodir: false, // 不忽略目录，确保子目录被递归处理
          }
        },
      ],
    }),
  ],
};

方案二：通过Glob模式精细控制复制 #

如果需要针对特定文件类型或路径做过滤，可以使用**/*匹配所有子目录和文件，配合[path]占位符保留完整嵌套路径：

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

module.exports = {
  // ...其他Webpack配置项
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: "**/*", // 匹配基准目录下的所有文件和子目录
          context: path.resolve(__dirname, "src/styles/directory"), // 指定相对路径的基准目录
          to: path.resolve(__dirname, "lib/styles/directory/[path][name][ext]"), // [path]保留完整嵌套路径
        },
      ],
    }),
  ],
};

原配置问题说明 #

你之前使用的[folder]占位符仅能获取文件的直接父目录，无法承载多层嵌套的路径结构，因此会导致子目录层级丢失。替换为[path]占位符（方案二）或直接复制整个目录（方案一），即可实现你期望的输出结构。

内容的提问来源于stack exchange，提问作者Jake Metz