如何让Webpack不重命名特定文件？配置报错求解决方案

你遇到的错误是因为exclude了splash.png后，该文件没有被asset/resource处理，但依然被image-webpack-loader解析，却缺少后续loader将二进制文件输出，导致解析失败。以下是两种可靠的实现方案：

方案一：单独指定单个文件保留原名 #

在Webpack配置中添加两条规则，先匹配需要保留原名的文件，再处理其他图片：

const path = require('path');

module.exports = {
  // 其他配置...
  module: {
    rules: [
      // 处理splash.png，保留原文件名
      {
        test: /splash\.png$/,
        type: "asset/resource",
        use: ['image-webpack-loader'], // 若不需要图片压缩可移除该行
        generator: {
          // 输出路径和文件名保持原样，可根据你的输出目录调整
          filename: 'assets/images/[name][ext]'
        }
      },
      // 处理其他图片，添加哈希重命名
      {
        test: /\.(png|svg|jpg|gif)$/,
        exclude: /splash\.png$/,
        type: "asset/resource",
        use: ['image-webpack-loader'],
        generator: {
          filename: 'assets/images/[name].[contenthash][ext]'
        }
      }
    ]
  }
};

方案二：将定制化图片移到单独文件夹 #

如果愿意把可替换文件放到单独目录（比如src/assets/custom/），配置会更清晰：

const path = require('path');

module.exports = {
  // 其他配置...
  module: {
    rules: [
      // 处理定制化文件夹下的图片，保留原名
      {
        test: /\.(png|svg|jpg|gif)$/,
        include: path.resolve(__dirname, "../src/assets/custom"),
        type: "asset/resource",
        use: ['image-webpack-loader'], // 按需移除压缩配置
        generator: {
          filename: 'assets/custom/[name][ext]'
        }
      },
      // 处理其他图片，哈希重命名
      {
        test: /\.(png|svg|jpg|gif)$/,
        exclude: path.resolve(__dirname, "../src/assets/custom"),
        type: "asset/resource",
        use: ['image-webpack-loader'],
        generator: {
          filename: 'assets/images/[name].[contenthash][ext]'
        }
      }
    ]
  }
};

关键注意事项 #

• Webpack规则按从上到下顺序匹配，必须把保留原名的规则放在前面，避免被后续规则覆盖。
• generator.filename的路径要和你的项目输出结构匹配，确保定制化图片输出到容易替换的位置。
• 若不需要对定制化图片进行压缩，直接删除对应规则里的use: ['image-webpack-loader']即可。

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