React+TypeScript从static目录加载png/svg作为favicon路径失败求助

尝试从/static/目录加载SVG和PNG文件路径，动态设置网站favicon。已完成以下配置：

• 包含视图文件、图标文件、类型声明文件、tsconfig、webpack配置文件等完整文件结构
• 在BrowserView.ts中引入图标文件
• 通过custom.d.ts声明SVG和PNG模块类型
• 配置tsconfig.json编译选项
• 在webpack.config.js中用url-loader处理图片
• package.json已安装相关依赖

但仍出现模块解析错误：PNG文件提示“意外字符”，SVG文件提示“意外token”，均显示无合适loader处理。目标是通过updateFavicon方法动态修改favicon的href属性，代码如下：

private updateFavicon(view: View): void {
    // Get the element by id tag
    const favicon_svg: HTMLElement = document.getElementById("favicon_svg")!;
    const favicon_png: HTMLElement = document.getElementById("favicon_png")!;

    // Set the icon
    favicon_svg.setAttribute("href", view.faviconSvg);
    favicon_png.setAttribute("href", view.faviconPng);
}

1. 修正Webpack Loader规则配置 #

确保Webpack的资源处理规则正确匹配目标文件，且覆盖/static/目录：

• Webpack 5推荐使用asset/resource替代url-loader，配置示例：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg)$/,
        include: path.resolve(__dirname, 'static'), // 明确指定要处理的目录
        type: 'asset/resource',
        generator: {
          filename: 'assets/icons/[name].[hash:8].[ext]' // 输出路径可自定义
        }
      }
    ]
  }
};

• 若坚持使用url-loader，需确保安装file-loader作为依赖，且配置正确：

{
  test: /\.(png|svg)$/,
  include: path.resolve(__dirname, 'static'),
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192, // 小文件转base64，大文件输出为单独文件
        name: '[name].[hash:8].[ext]',
        outputPath: 'assets/icons/'
      }
    }
  ]
}

2. 验证类型声明文件有效性 #

• 确保custom.d.ts被tsconfig.json正确包含：

{
  "compilerOptions": {
    "typeRoots": ["./src/types", "./node_modules/@types"]
  },
  "include": ["src/**/*", "custom.d.ts"] // 加入类型声明文件路径
}

• 确认类型声明内容正确：

declare module '*.png' {
  const value: string;
  export default value;
}

declare module '*.svg' {
  const value: string;
  export default value;
}

3. 检查文件引入与路径传递 #

• 在BrowserView.ts中正确引入图标文件，确保路径相对正确：

import faviconSvg from '../static/favicon.svg';
import faviconPng from '../static/favicon.png';

// 将处理后的路径赋值给view对象的对应属性
view.faviconSvg = faviconSvg;
view.faviconPng = faviconPng;

• 确认view.faviconSvg和view.faviconPng最终是Webpack处理后的字符串路径（而非原始文件路径）。

4. 修正Favicon元素标签 #

确保HTML中的favicon元素是标准的<link>标签，且指定正确的类型：

<link id="favicon_svg" rel="icon" type="image/svg+xml" href="">
<link id="favicon_png" rel="shortcut icon" type="image/png" href="">

（注：SVG favicon需指定type="image/svg+xml"才能被浏览器正确识别）

5. 清理缓存并重新构建 #

删除Webpack缓存（如node_modules/.cache或项目根目录的dist目录），然后执行重新构建命令（如npm run build或npm run dev），避免旧配置缓存导致的问题。

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