在电子锻造+ webpack应用程序中使用电子生成器构建的应用程序显示了空白屏幕

Question

我想在我的电子锻造(webpack-模板和反应)应用程序中使用电子生成器，因为有更多的包装选项。

电子锻造应用程序是用

create electron-app test --template=webpack

这是我的package.json

  "name": "vocascan",
  "productName": "vocascan",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": ".webpack/main",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "echo \"No linting configured\"",
    "build": "electron-forge start && electron-builder --linux"
  },
  "keywords": [],
  "build": {
    "productName": "Vocascan",
    "files": [
    ],
    "linux": {
      "target": [
        "AppImage"
      ],
      "category": "Development"
    }
  },
  "license": "MIT",
  "config": {
    "forge": {
      "packagerConfig": {},
      "plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.jsx",
                  "name": "main_window"
                }
              ]
            }
          }
        ]
      ]
    },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.54",
    "@electron-forge/maker-deb": "^6.0.0-beta.54",
    "@electron-forge/maker-rpm": "^6.0.0-beta.54",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.54",
    "@electron-forge/maker-zip": "^6.0.0-beta.54",
    "@electron-forge/plugin-webpack": "6.0.0-beta.54",
    "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
    "css-loader": "^4.2.1",
    "electron": "10.1.5",
    "node-loader": "^1.0.1",
    "style-loader": "^1.2.1",
    "electron-builder": "^22.9.1"
  },
  "dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "babel-loader": "^8.1.0",
    "electron-squirrel-startup": "^1.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }

如您所见，我添加了

"build": "electron-forge start && electron-builder --linux"

和

"build": {
    "productName": "Vocascan",
    "files": [
    ],
    "linux": {
      "target": [
        "AppImage"
      ],
      "category": "Development"
    }
  },

以便使电子生成器可用。

构建运行良好，但是当我启动应用程序时，我的任何组件都没有显示出来。

​

​

如果有人需要浏览器窗口代码

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

这是我的文件夹结构

​

​

Answer 1

此模板不适用于电子构建器。

因为这个模板被设计成与电子锻造命令一起工作。电子构建器不能使用它，因为它使用webpack开发服务器，而不是构建静态构建。我链接的模板是与电子构建器一起工作的，因为它正在对react进行静态构建，您使用的react组件和节点模块以及电子构建器都可以使用它。

我推荐这个模板：https://github.com/Levminer/create-electron-react-app