Webpack构建时如何复制图片并保留原目录结构？

太懂这种糟心的情况了——辛辛苦苦把图片按分类放在src/img/folder/name/这种层级里，结果Webpack一打包全堆到dist/img/根目录，找个图都得翻半天！别着急，这是因为file-loader默认不会保留文件的相对路径，咱们只要调整几个配置就能搞定。

问题根源 #

默认情况下，file-loader只会把文件输出到你指定的outputPath目录，并且用文件名（或哈希名）作为输出文件名，完全忽略了原文件的目录层级。要保留结构，就得利用它的占位符和context选项来精准控制输出路径。

解决方案（针对file-loader） #

修改你的Webpack规则，重点配置name和context选项，同时修正正则表达式的小错误：

{
  test: /\.(jpg|png|svg|gif)$/, // 注意：你之前的正则写错了，应该是`|gif`而不是`/gif`
  exclude: [/node_modules/, /font/, /fonts/],
  use: {
    loader: 'file-loader',
    options: {
      // 用[path]保留相对路径，[name].[ext]保留原文件名和扩展名
      name: '[path][name].[ext]',
      // 指定基准目录为`src/img`，这样[path]就会从该目录之后的层级开始计算
      context: 'src/img',
      // 最终输出到`dist/img/`目录下，结合[path]就会还原原层级
      outputPath: 'img/',
      // 如果网页引用图片需要绝对路径，可配置这个选项
      publicPath: '/img/'
    }
  }
}

关键选项解释：

• context: 'src/img'：把src/img作为路径计算的起点，这样src/img/folder/name/01.png对应的[path]就是folder/name/
• name: '[path][name].[ext]'：输出文件名会带上相对路径，最终01.png就会被输出到dist/img/folder/name/01.png，完美还原原结构

如果你用的是Webpack 5，官方更推荐用asset/resource替代file-loader，配置逻辑类似：

{
  test: /\.(jpg|png|svg|gif)$/,
  exclude: [/node_modules/, /font/, /fonts/],
  type: 'asset/resource',
  generator: {
    filename: 'img/[path][name].[ext]',
    context: 'src/img',
    publicPath: '/'
  }
}

额外提醒 #

一定要修正正则表达式的错误：你之前写的/\.(jpg|png|svg/gif)$/会导致无法正确匹配gif格式的图片，改成|gif才能正常生效。

调整完这些配置，你的图片就会按照原有的目录结构乖乖输出到dist/img/对应的子目录里啦！

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