在 Electron + React 中使用静态资源

Question

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

谢谢！

Answer 1

事实证明，Webpack 文档清楚地阐明了答案。谁知道？对于旧版本的 Webpack，我发现了很多类似的 questions/answers，所以我将在此处为 Webpack 5 post 一个。它需要在 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 已经找到并处理了资产。

在 Electron + React 中使用静态资源

Using Static Assets in Elecron + React

reactjs

webpack

electron

electron-forge