Angular 18中@angular-builders/custom-webpack图片打包配置问题求助

1. Angular默认的assets配置会直接复制图片到dist/assets，但Webpack的asset/resource规则并未生效——因为你在组件中用静态路径src="./assets/jobs.png"引用图片，Webpack不会主动处理这种未通过模块导入的资源，导致自定义规则被绕过。
2. 发布到npm后，图片路径指向宿主React项目的根目录，而非包内的资源位置，因为打包时未将资源路径处理为相对包的路径。

1. 调整Angular Assets配置，避免冲突 #

首先移除angular.json中直接复制assets的配置，让Webpack全权处理图片资源：

{
  ...
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        ...
        "assets": [
          // 移除这一行：{ "glob": "**/*", "input": "src/assets", "output": "/assets" }
        ],
        ...
      }
    }
  }
}

2. 修改Webpack配置，确保资源处理生效 #

调整Webpack规则的优先级，并添加相对路径配置，避免资源路径指向项目根：

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

export default (
  config: webpack.Configuration,
  options: CustomWebpackBrowserSchema,
  targetOptions: TargetOptions
) => {
  if (config.module && config.module.rules) {
    // 找到并替换Angular默认的图片处理规则，而非新增规则导致冲突
    const imageRuleIndex = config.module.rules.findIndex(rule => 
      rule.test && (rule.test as RegExp).test('.png')
    );
    
    if (imageRuleIndex !== -1) {
      config.module.rules[imageRuleIndex] = {
        test: /\.(png|jpg)$/i,
        type: 'asset/resource',
        parser: {
          dataUrlCondition: {
            maxSize: 5 * 1024 // 10KB以下图片内联
          }
        },
        generator: {
          filename: 'images/[name]-[hash][ext]'
        }
      };
    } else {
      // 未找到默认规则时再新增
      config.module.rules.push({
        test: /\.(png|jpg)$/i,
        type: 'asset/resource',
        parser: {
          dataUrlCondition: {
            maxSize: 5 * 1024
          }
        },
        generator: {
          filename: 'images/[name]-[hash][ext]'
        }
      });
    }

    // 设置output的publicPath为相对路径，确保资源引用指向包内
    if (config.output) {
      config.output.publicPath = './';
    }
  }

  return config;
};

3. 修改组件中图片的引用方式 #

必须通过模块导入让Webpack识别资源，不能直接用静态字符串路径：

// 在组件文件中导入图片（路径根据组件实际位置调整）
import jobsImage from '../assets/jobs.png';

@Component({
  selector: 'my-web-component',
  template: `<img [src]="jobsImage" alt="Jobs" />`,
  // ...其他配置
})
export class MyWebComponent {
  jobsImage = jobsImage;
}

4. 验证打包结果 #

执行ng build后，检查dist目录：

• 会生成images文件夹，包含处理后的带哈希后缀的图片文件
• 组件代码中会自动替换图片路径为相对路径（如./images/jobs-xxxxxx.png）

• 静态路径引用不会触发Webpack的资源处理逻辑，必须通过ES模块导入或require()方式引用图片
• 设置publicPath: './'是确保资源路径相对于组件代码，而非宿主项目根目录
• 替换Angular默认的图片规则，避免自定义规则被默认规则覆盖导致无效

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