如何在Angular项目的TypeScript文件中加载.webp文件？

一、搞定WebP文件的Webpack加载配置 #

Angular默认的Webpack配置不支持处理WebP格式，得扩展配置添加对应的加载器：

步骤1：安装所需加载器 #

先安装file-loader用于处理图片资源：

npm install file-loader --save-dev

步骤2：用angular-builders扩展Webpack配置 #

1. 安装扩展Webpack配置的依赖包：

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录新建webpack.config.js，编写WebP文件的处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.webp$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'assets/weapons' // 编译后图片会输出到dist下的对应目录
            }
          }
        ]
      }
    ]
  }
};

3. 修改angular.json的构建配置
   找到项目中projects -> [你的项目名称] -> architect -> build节点，将builder替换为@angular-builders/custom-webpack:browser，并添加customWebpackConfig指向刚才创建的配置文件：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    },
    // 保留原有其他配置...
  }
}

同时修改serve节点的builder为@angular-builders/custom-webpack:dev-server，确保本地开发时加载器生效：

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  // 保留原有其他配置...
}

配置完成后，再导入WebP文件就不会触发编译错误，导入后得到的是编译后的资源URL。

二、更靠谱的武器图标URL管理方式 #

如果不想直接导入文件，而是使用资源URL，别用零散的字符串硬编码，试试这几种方案：

1. 统一创建图标路径常量文件 #

在src/assets/weapons目录下新建weapon-icons.ts，集中管理所有武器图标路径：

export const WEAPON_ICONS = {
  DAGGER: 'assets/weapons/swords/dagger.webp',
  LONG_SWORD: 'assets/weapons/swords/long-sword.webp',
  // 按格式添加其他武器图标...
};

后续创建Weapon实例时直接引用常量，避免重复书写冗长路径：

import { WEAPON_ICONS } from '../assets/weapons/weapon-icons';
import Sword from './Sword';

export default new Sword(WEAPON_ICONS.DAGGER);

2. 结合环境变量区分环境路径（可选） #

如果开发和生产环境的资源路径不同（比如生产用CDN），可以在environment.ts和environment.prod.ts中配置基础路径：

// environment.ts（开发环境）
export const environment = {
  production: false,
  assetBaseUrl: '/assets/'
};

// environment.prod.ts（生产环境）
export const environment = {
  production: true,
  assetBaseUrl: 'https://cdn.yourdomain.com/assets/'
};

然后在常量文件中拼接完整路径：

import { environment } from '../../environments/environment';

export const WEAPON_ICONS = {
  DAGGER: `${environment.assetBaseUrl}weapons/swords/dagger.webp`,
  // 其他图标同理...
};

3. 优化Weapon类的类型定义 #

可以给icons属性增加类型约束，比如设为只读避免意外修改：

// 可根据需求用字面量类型进一步约束路径格式，这里先简化
export type WeaponIcon = string;

export default abstract class Weapon {
  readonly icons: WeaponIcon[];

  constructor(iconOrIcons: WeaponIcon | WeaponIcon[]) {
    this.icons = typeof iconOrIcons === 'string' ? [iconOrIcons] : iconOrIcons;
  }
}

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