在 Electron + React 中使用静态资源

Posted 2023-03-22

【中文标题】在 Electron + React 中使用静态资源

【英文标题】：Using Static Assets in Elecron + React

【发布时间】：2022-01-11 09:28:39

【问题描述】：

我是 Electron 新手，尝试在 Electron + React 应用程序中做一些简单的事情时遇到了一些麻烦。我要做的就是：从 React 组件加载位于我的src/assets 目录中的 3D 模型 (.glb)。我使用this 指南创建了项目。在一个典型的 React 项目中，我可以直接在我的 JS 模块中导入文件并在我的代码中引用路径。但是，使用默认的 Webpack 配置，找不到该文件。在加载资源时，我对 React + Webpack 如何工作的理解显然存在差距。我错过了什么？非常感谢任何帮助。

谢谢！

【参考方案1】：

事实证明，Webpack 文档清楚地说明了答案。谁知道？我为旧版本的 Webpack 找到了很多类似的问题/答案，因此我将在此处发布一个针对 Webpack 5 的问题。它需要在 webpack.rules.js 文件中添加一个简单的两行内容：

    test: /\.(png|jpg|gif|svg|glb)$/,
    type: 'asset/resource'

关键是asset/resource 行。它是 Webpack 5 的新功能，允许捆绑资产而不需要任何额外的加载器。这样，资产可以作为 javascript 模块包含在内，而 Webpack 将负责其余的工作。

所以，可以这样做：

import modelSrc from "../assets/some_awesome_model.glb";

就是这样。 Webpack 会输出一个 URL，例如 /9feee593dc369764dd8c.glb，这意味着 Webpack 已经定位并处理了资产。