javascript - 使用 webpack 和 electron-forge 构建电子应用程序时路径中断

Question

我有一个电子应用程序，我在其中使用 webpack 并使用 electron-forge 构建（我认为问题来自这两个之一）。

当我使用电子锻造构建应用程序时出现此问题，在开发过程中没有问题。构建应用程序并启动它时，不显示任何图像，并且调试工具显示它尝试访问的路径是错误的路径。

我这样构建：

"main": "./.webpack/main",
"scripts": {
  "make": "electron-forge make"
}

软件编译时路径如下：resources/app/.webpack/renderer/login/images/logo.png

但图像位于此处：resources/app/.webpack/renderer/images/logo.png

login错误添加到路径的文件夹就在那里，因为在我package.json的电子伪造中我有这个配置：

"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
        ]
      }
    }
  ]
]

我们可以看到一个入口点的名称是“login”，这是我的应用程序的第一页，也是图像应该在的页面。但是在开发中没有login创建文件夹，但是当我构建时，login它被添加到应该在登录页面上的图像路径中。

我尝试安装electron-webpackwebpack 配置文件并对其进行一些更改。现在，在文件中webpack.renderer.config.js我有这个：

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
}

标签： javascripttypescriptwebpackelectronelectron-forge