Webpack5发布后图片字体未以编码Data URI加载如何解决

1. 核心配置错误：你当前对.html文件配置的type: 'asset/resource'只会把HTML文件原样作为静态资源输出，完全不会解析HTML内部img标签的src资源引用，这些图片路径根本不会进入Webpack的资源处理链路，自然也触发不到你配置的asset/inline转base64规则。
2. 模板写法错误：最终渲染出的img标签src值带url()包裹，这是CSS中引用背景图的语法，直接写在HTML的img src属性里时，即使后续加了HTML解析loader也无法正确识别资源路径，只会把整段字符串当普通文本输出。
3. 规则覆盖隐患：如果是基于Angular CLI自定义Webpack配置，@angular-devkit内置的静态资源处理规则可能优先级高于你自定义的图片规则，导致自定义配置不生效。

• 替换HTML处理规则：移除原来HTML规则的type: 'asset/resource'配置，改用html-loader处理HTML文件，该loader会自动扫描HTML内所有标签的资源引用（包括img的src属性），把匹配到的资源交给Webpack对应规则处理。配置示例：

{
  test: /\.html$/,
  loader: 'html-loader',
  options: {
    sources: {
      list: [
        '...', // 保留默认的资源识别规则
        { tag: 'img', attribute: 'src', type: 'src' }
      ]
    }
  }
}

• 修正Angular模板写法：所有HTML模板里的img标签src属性直接写图片相对路径，不要加url()包裹，错误写法src="url(./images/logo.png)"需改为src="./images/logo.png"。
• 避免规则冲突：如果项目保留了Angular CLI默认的构建配置，可给自定义的图片、HTML处理规则加上enforce: 'pre'配置，让自定义规则优先执行，防止内置规则覆盖你的配置；也可直接在默认规则里把图片、HTML文件排除。
• 验证效果：清空构建缓存后重新执行构建，此时Webpack处理HTML时会捕获所有img引用的图片资源，匹配到asset/inline规则后会自动转为base64格式的Data URI写入最终的HTML文件。

注：Webpack 5.5.0版本的Asset Modules功能已稳定，不存在版本缺陷导致内联失效的问题，只要资源引用能被Webpack正确解析，1KB大小的资源一定会被转为Data URI输出。

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