javascript - Trasig väg vid byggande av electron-app med webpack och electron-forge
Jag har en Electron-app där jag använder webpack och bygger med electron-forge (jag tror problemet kommer från en av dessa två).
Problemet uppstår när jag bygger appen med electron-forge, inga problem under utvecklingsprocessen. När appen är byggd och jag startar den, visas inga bilder och felsökningsverktyget visar mig att sökvägen den försöker komma åt är en felaktig sökväg.
Jag bygger så här:
"main": "./.webpack/main",
"scripts": {
"make": "electron-forge make"
}
När programvaran kompileras ser sökvägen ut så här: resources/app/.webpack/renderer/login/images/logo.png
Men bilden finns här: resources/app/.webpack/renderer/images/logo.png
Mappen login som felaktigt lades till i sökvägen finns där eftersom jag i min package.json har denna konfiguration för electron-forge:
"plugins": [
[
"@electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/front/views/window.html",
"js": "./src/front/scripts/login.ts",
"name": "login",
"preload": {
"js": "./src/preload.ts"
}
},
// other entrypoints
]
}
}
]
]
Och vi kan se att namnet på en ingångspunkt är "login", vilket är den första sidan i min app och som är sidan där bilden ska vara. Men i utvecklingen skapas ingen login-mapp, däremot när jag bygger läggs login till i sökvägen för bilder som ska finnas på inloggningssidan.
Jag har försökt installera electron-webpack och göra några ändringar i webpack-konfigurationsfilerna. För tillfället har jag i filen webpack.renderer.config.js detta:
const rules = require('./webpack.rules');
// other rules
rules.push({
test: /\.(png|svg|jpg|gif)$/,
include: [
path.resolve(__dirname, "src/front/images"),
],
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}
});
module.export = {
module: {
rules
}
// other things
}