Webpack配置loader、require引入且重装依赖仍无法加载PNG问题

该报错的核心原因是<img>标签的src属性最终拿到的是对象类型而非字符串路径，触发路径/[object%20Object]的无效请求，具体诱因有两点：

• Webpack loader配置冲突：当前配置里对PNG格式文件写了两条重叠的处理规则，一条是url-loader处理jpg/png/svg，另一条是file-loader处理png/jpe?g/gif，两个loader会同时命中PNG文件，按Webpack loader执行顺序叠加处理后，最终返回的模块结构被破坏，不再是预期的路径字符串。
• 取值逻辑和loader配置不匹配：你给file-loader设置了esModule: false，该模式下require()引入文件会直接返回CommonJS格式的导出值（也就是路径字符串），不需要额外取.default属性，多余的.default取值会拿到异常的模块对象。

• 第一步：清理重复的图片处理规则，只保留一套图片处理逻辑，同时统一esModule配置
  删掉冗余的file-loaderPNG处理规则，修改url-loader配置如下，保证所有图片格式走统一处理逻辑：

  // webpack.config.js 模块规则部分
  module: {
    rules: [
      // 原有js、css规则保留不变
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: {
          loader: 'url-loader',
          options: {
            limit: 25000, // 小于25KB的图片自动转base64，大于的图片会 fallback 输出为静态资源文件
            esModule: false, // 统一为CommonJS模块模式，和require引入方式对齐
          }
        }
      }
    ]
  }
  

• 第二步：修正图片引入写法，去掉多余的.default取值

  // 组件内img标签写法
  <img src={require('./mug1.png')} className="mugImage" />
  

  如果用import方式引入，写法如下，同样不需要额外取属性：

  import mug1Img from './mug1.png'
  
  <img src={mug1Img} className="mugImage" />
  

• 第三步：清理缓存重启服务验证
  因为之前的loader异常可能被构建缓存记录，执行以下命令清理后重启开发服务：

  rm -rf node_modules/.cache dist
  npm run dev
  

修复完成后，检查img标签的src属性值，应该为静态资源路径（类似/assets/mug1.xxxx.png）或base64格式的dataURL，不会再出现[object Object]的异常路径，图片可正常渲染。

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