使用copyWebpackPlugin复制文件时目录结构不符预期的问题求助

这个问题我之前帮朋友排查过，其实是CopyWebpackPlugin对路径匹配的逻辑导致的——当你直接在from里写完整路径加**通配符时，插件会保留src这一层目录结构，因为它把src/libs/**里的src当成了匹配路径的一部分。下面给你几个靠谱的解决方案：

方案一：使用context指定上下文目录 #

这是最常用也最清晰的方式，通过context设置文件查找的根目录，from只需要写该目录下的相对路径，这样复制时就不会带上src层级了：

new CopyWebpackPlugin([
  {
    from: '**', // 匹配context目录下的所有文件和子目录
    to: __dirname + '/dist/copy-files',
    context: __dirname + '/src/libs' // 把src/libs作为查找文件的上下文根目录
  }
])

原理：context会告诉插件，所有from的路径都是相对于这个目录的，复制时只会保留context目录内的文件结构，不会带上context本身的上层路径（也就是src）。

方案二：通过globOptions.cwd指定查找根目录 #

如果你不想用context，也可以用globOptions里的cwd参数，效果和context类似，本质是告诉glob匹配器从哪个目录开始查找文件：

new CopyWebpackPlugin([
  {
    from: '**/*', // 匹配cwd目录下的所有文件
    to: __dirname + '/dist/copy-files',
    globOptions: {
      cwd: __dirname + '/src/libs' // 指定glob的工作目录
    }
  }
])

方案三：调整to的路径占位符（适合自定义结构场景） #

如果需要更灵活的路径控制，可以用to的占位符配合路径转换，剥离多余的层级：

new CopyWebpackPlugin([
  {
    from: __dirname + '/src/libs/**',
    to: __dirname + '/dist/copy-files/[path][name].[ext]',
    // 手动剥离src/libs前缀
    transformPath: (targetPath) => {
      return targetPath.replace('src/libs/', '');
    }
  }
])

这个方法更灵活，但相比前两种稍显繁琐，适合需要对路径做额外修改的场景。

另外要注意：不同版本的CopyWebpackPlugin配置可能有细微差异，比如v6+版本支持更简洁的对象写法，但核心的路径控制逻辑是一致的。

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