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

Question

我已经设置了一个电子应用程序 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]'
    }
  }

Answer 1

也许有点晚了，但我找到了如何让它工作。文件加载器模块解析导入/需要语句。所以如果直接使用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")
  });