Webpack5如何实现CSS文件内字体、图片资源的内联处理？

你当前配置失效的核心原因非常直接：直接对.css文件配置type: "asset/inline"时，Webpack只会把磁盘上的CSS原始文本直接转成base64字符串，完全不会解析CSS内部的依赖关系，所有url()引用的字体、图片都不会被识别为模块依赖，自然也不会触发你配置的图片、字体内联规则，最终输出的CSS里url()路径还是原始的相对路径，没有任何处理。

核心思路是先走CSS loader链解析完所有内部资源引用，把所有url()指向的资源先内联为base64格式的data URI，再把处理完成的完整CSS内容按需求做内联导出。

• 保留你原有配置里的图片、字体内联规则，这部分配置本身是正确的
• 删除原有直接匹配CSS文件的asset/inline规则，替换为带loader处理链的CSS规则，完整配置如下：

module.exports = {
  // 其他Webpack配置（entry、output等）保持不变
  module: {
    rules: [
      // 原有图片内联规则保留
      {
        test: /\.(png|jpg|gif)$/i,
        type: "asset/inline",
      },
      // 原有字体内联规则保留
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/inline",
      },
      // 替换原有CSS规则
      {
        test: /\.css$/i,
        use: [
          // 提取css-loader处理完成的纯CSS文本
          (source) => {
            const cssContent = source.match(/export default "(.*)";/s)[1]
              .replaceAll('\\n', '\n')
              .replaceAll('\\"', '"')
              .replaceAll('\\/', '/');
            // 直接返回纯CSS内容交给后续asset模块处理
            return cssContent;
          },
          // 用css-loader解析CSS内部的url()、@import依赖
          {
            loader: "css-loader",
            options: {
              url: true, // 强制开启url()解析，默认即为true
              import: true, // 支持CSS内的@import引入
              sourceMap: false, // 关闭sourceMap避免冗余内容
            }
          }
        ],
        // 最终将处理完所有资源的CSS内容转base64导出
        type: "asset/inline"
      }
    ]
  }
}

配置完成后，在业务代码中导入CSS文件即可拿到符合要求的结果：

import base64Css from './your-style.css';
// base64Css 格式为 data:text/css;base64,xxxxxx
// 内部所有url()引用的图片、字体都已经被替换为对应资源的base64 data URI，没有任何外部依赖

如果你不需要直接拿到base64格式的CSS，而是需要纯CSS文本字符串，只需要把CSS规则里的type: "asset/inline"改成type: "asset/source"即可，此时导入拿到的就是处理完所有内联资源的原始CSS文本。

注意事项：不要在这条CSS规则里添加style-loader、mini-css-extract-plugin的loader，这类loader会把CSS处理成DOM插入、独立文件抽离的逻辑，和内联需求冲突。

内容的提问来源于stack exchange，提问作者browser-bug