Angular 14中如何结合custom webpack与url-loader嵌入字体

问题分析 #

你当前的配置未生效，核心原因是Angular默认的Webpack配置中已经包含了字体文件的处理规则，你通过push新增的规则优先级低于默认规则，所以字体仍然按默认逻辑输出到dist目录，而非转为Base64嵌入CSS。

解决方案 #

需要修改Angular默认的字体处理规则，将其替换为url-loader（或Webpack 5+的内置资源类型），而非新增规则。

步骤1：确保依赖安装 #

如果还未安装url-loader和file-loader，先执行：

npm install url-loader file-loader --save-dev

步骤2：修改自定义Webpack配置 #

修改custom-webpack.config.ts，遍历现有规则并替换字体处理逻辑：

import * as webpack from 'webpack';
import { CustomWebpackBrowserSchema, TargetOptions } from '@angular-builders/custom-webpack';

export default (
  config: webpack.Configuration,
  options: CustomWebpackBrowserSchema,
  targetOptions: TargetOptions
) => {
  // 遍历现有规则，找到处理字体的规则并修改
  config.module.rules.forEach(rule => {
    // 匹配处理woff/woff2/eot/ttf的规则
    if (rule.test instanceof RegExp && rule.test.test('.woff2')) {
      // 替换为url-loader
      rule.use = [
        {
          loader: 'url-loader',
          options: {
            limit: 100000, // 所有小于100KB的字体转为Base64，可按需调整
            name: '[name].[hash].[ext]', // 超过limit的字体仍按原命名输出（可选）
          }
        }
      ];
      // 移除Webpack 5+默认的asset类型配置
      delete rule.type;
    }
  });

  // 兜底：如果未找到默认规则，新增字体处理规则
  const hasFontRule = config.module.rules.some(rule => 
    rule.test instanceof RegExp && rule.test.test('.woff2')
  );
  if (!hasFontRule) {
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      loader: 'url-loader',
      options: {
        limit: 100000,
      },
    });
  }

  return config;
};

步骤3：验证配置 #

执行构建命令：

ng build

查看生成的dist/styles.css，检查PrimeIcons的字体引用是否已转为Base64编码（格式类似data:font/woff2;base64,...），同时dist目录下不应再出现单独的字体文件。

Webpack 5+替代方案 #

如果使用Angular 12+（对应Webpack 5），也可以直接使用Webpack内置的asset/inline类型，无需依赖url-loader：

// 在custom-webpack.config.ts的规则修改部分替换为：
rule.type = 'asset/inline';

关键注意点 #

• 你的angular.json中@angular-builders/custom-webpack:browser的配置是正确的，无需调整
• 若字体文件超过limit设置的大小，仍会以文件形式输出，可根据实际字体大小调整limit值（比如设为1000000即1MB）

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