Electron + React 项目加载 src/assets 下 .glb 静态资源找不到问题求助

你遇到的报错是因为默认Webpack配置没有将.glb格式识别为可处理的静态资源类型，按以下步骤配置即可解决：

步骤1：修改Webpack渲染进程配置 #

Electron Forge创建的React项目，渲染进程对应的Webpack配置默认在项目根目录的webpack.renderer.config.js文件中，找到module.rules配置段，新增.glb/.gltf格式的资源处理规则：

module.exports = {
  // 保留其他原有配置不变
  module: {
    rules: [
      // 保留其他原有规则（处理ts/tsx/css等资源的规则）不变
      {
        test: /\.(glb|gltf)$/,
        type: 'asset/resource',
        generator: {
          // 配置打包后资源的输出路径，可按需调整
          filename: 'assets/3d-models/[name][ext]'
        }
      }
    ]
  }
}

注：上述为Webpack 5的原生资源处理写法，无需额外安装第三方loader

步骤2：添加TypeScript类型声明（仅TS项目需要） #

如果你的项目使用TypeScript，需要新增全局类型声明避免TS识别.glb文件时报错，在src目录下新建glb.d.ts文件，内容如下：

declare module '*.glb' {
  const resourcePath: string;
  export default resourcePath;
}
declare module '*.gltf' {
  const resourcePath: string;
  export default resourcePath;
}

步骤3：在React组件中引入使用 #

配置完成后直接通过ES模块导入的方式引入模型即可，Webpack会自动处理路径映射，示例：

import React from 'react'
import testModel from './assets/your-model.glb'
// 后续直接将testModel变量传给Three.js等3D渲染库的加载器使用即可

关键说明 #

• 不要在组件代码中直接写src/assets/xxx.glb的相对路径引用，必须通过import导入的方式获取资源路径，才能匹配打包后的实际资源地址。
• 若你使用的是Webpack 4版本，需要先安装file-loader依赖，再将上述步骤1的规则替换为{ test: /\.(glb|gltf)$/, use: 'file-loader' }即可。

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