我已经设置了一个电子应用程序 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]'
}
}
也许有点晚了,但我找到了如何让它工作。文件加载器模块解析导入/需要语句。所以如果直接使用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")
});