使用电子锻造和反应(打字稿)堆栈在电子中设置应用程序图标

问题描述 投票:0回答:1

我已经设置了一个电子应用程序 TS+Webpack反应TS

我正在尝试更改应用程序图标。

我的应用程序有以下文件夹结构

src
    ├───main
    │   ├───assets
    │   ├───methods
    │   └───types
    |   index.ts
    |   preload.ts
    ├───renderer
    │   ├───assets
    │   ├───components
    │   ├───context
    │   ├───helpers
    │   ├───layout
    │   ├───mui
    │   ├───router
    │   └───views
    └───typings

图标位于index.ts(主流程文件)内的

src/main/assets
文件夹中 我已经添加了

const mainWindow = new BrowserWindow({
    height: 800,
    width: 1200,
    icon: path.join(__dirname, 'assets/64x64.png'),
})

但这似乎不起作用。

除此之外,我在

webpack.rules.js
中有以下用于图像文件的webpack配置,用于在渲染器中导入图像文件。

  {
    test: /\.(png|jpe?g|gif|jp2|webp)$/,
    loader: 'file-loader',
    options: {
      name: 'images/[name].[ext]'
    }
  }
reactjs webpack electron electron-forge
1个回答
0
投票

也许有点晚了,但我找到了如何让它工作。文件加载器模块解析导入/需要语句。所以如果直接使用path是不行的。 这就是我们可以使用

copy-webpack-plugin
的地方。

使用

npm i -D copy-webpack-plugin
安装它。

在webpack.main.config.ts中添加


import { plugins } from "./webpack.plugins";
const CopyPlugin = require("copy-webpack-plugin");

// Your other rules

plugins.push(
  new CopyPlugin({
    patterns: [
      { from: "src/main/assets", to: "assets" },
    ],
  })
);

// Other webpack config 

然后你就可以像现在一样使用它了。


  mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    icon: join(__dirname, "/assets/logo.png")
  });
© www.soinside.com 2019 - 2024. All rights reserved.