webpack 5如何配置修改打包输出图片路径并保留原有相对结构

问题原因 #

你当前配置中的[name]仅会读取文件本身的文件名，不会携带上级目录路径，因此所有图片都会直接输出到assets/img根目录，导致内层目录被扁平化。

解决方案（二选一即可） #

方案1：路径处理函数（灵活度最高）

修改图片规则中的generator配置，通过函数动态拼接输出路径，适配复杂路径场景：

{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
  use: {
    loader: 'image-webpack-loader',
    options: {
      disable: !isProduction,
      mozjpeg: {
        progressive: true,
        quality: 80,
      },
      optipng: {
        optimizationLevel: 3,
      },
      pngquant: {
        quality: [0.7, 0.9],
        speed: 4,
      },
    },
  },
  type: 'asset/resource',
  generator: {
    filename: (pathData) => {
      // 替换掉原路径的src/assets/img前缀，保留剩余相对路径
      const filePath = pathData.filename.replace(/^src\/assets\/img\//, '');
      return `assets/img/${filePath}`;
    }
  },
}

方案2：内置占位符+context配置

通过指定context参数确定相对路径的根目录，搭配[path]占位符直接保留目录结构，代码更简洁：

{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
  use: {
    loader: 'image-webpack-loader',
    // 原有loader配置保持不变
  },
  type: 'asset/resource',
  // 指定相对路径计算的根目录为src/assets/img
  context: path.resolve(__dirname, 'src/assets/img'),
  generator: {
    // [path]会自动携带文件相对于context的目录路径
    filename: 'assets/img/[path][name][ext]',
  },
}

两种方案配置完成后重新打包，即可完整保留src/assets/img下的原有目录层级到dist输出路径中。

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