Webpack 手动分发Electron app和使用Electron packager时出现问题

这是我的第一个StackOverflow问题，也是我的第一个Electron+ReactJS+Webpack项目。 经过一周的搜寻，我绝望地在这里寻求帮助。因此，任何能提供帮助的人都值得称赞

我的应用程序在开发环境中运行正常，但我无法为分发构建它。 该应用程序有两个渲染器（主窗口和连接窗口）。文件夹结构如下所示：

foobar
├── package.json
├── dist (output for build)
├── CommonStyles (some scss used by both renderers)
├── main-window (first renderer js and assets)
├── connect-window (second renderer js and asstes)
└── Electron (main process js and icon)

我能够实现的是使用3个入口点（一个主入口点和两个渲染器）将JS、HTML和其他资源构建到dist文件夹

首先，我尝试了预构建二进制文件的简单方法，并将我的应用程序和

node\u模块

+放入

package.json

到

resources/app

文件夹 启动Electron.exe将运行默认应用程序，如果我从

resources

文件夹中删除默认应用程序，则不会执行任何操作

接下来，我尝试在dist文件夹中运行全局安装的

electron-packager

（其中也有

node\u模块

+

package.json

）

几个小时内什么也不会发生。是的，安装了网络和Powershell

Package.json

{
  "name": "fotms-client-app",
  "version": "0.7.0",
  "description": "Fibre-optic tension measurement system app ",
  "author": "",
  "homepage": "",
  "repository": {
    "type": "git",
    "url": ""
  },
  "license": "MIT",
  "main": "./Electron/index.js",
  "scripts": {
    "prod": "webpack --config webpack.build.config.js && electron --noDevServer .",
    "dev": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
    "build": "webpack --config webpack.build.config.js",
    "postpackage": "electron-packager ./dist --out=./dist",
    "dist": "electron-builder",
    "prebuilt": "start electron ./dist/main.js"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/plugin-proposal-class-properties": "^7.5.0",
    "@babel/preset-env": "^7.5.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babili-webpack-plugin": "^0.1.2",
    "css-loader": "^0.28.11",
    "electron-builder": "^21.2.0",
    "electron-devtools-installer": "^2.2.4",
    "electron-packager": "^14.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.3",
    "electron": "^6.0.7",
    "prettier": "1.18.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.19.1",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
    "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
    "@fortawesome/react-fontawesome": "0.1.0-11",
    "acorn": "^6.0.0",
    "ajv": "^6.0.0",
    "axios": "^0.19.0",
    "date-fns": "^2.0.0-alpha.23",
    "dexie": "^2.0.4",
    "downsample-lttb": "0.0.1",
    "electron-log": "^3.0.5",
    "electron-settings": "^3.2.0",
    "eventsource": "^1.0.7",
    "ip": "^1.1.5",
    "iput": "^1.0.1",
    "is-ip": "^3.1.0",
    "leaflet": "^1.4.0",
    "local-storage": "^1.4.2",
    "lodash": "^4.17.11",
    "moment": "^2.22.2",
    "pify": "^4.0.1",
    "ping": "^0.2.2",
    "plotly.js": "^1.48.3",
    "plotly.js-locales": "^1.48.3",
    "prop-types": "^15.6.2",
    "react-accessible-accordion": "^3.0.0",
    "react-datepicker": "^2.1.0",
    "react-dropdown": "^1.6.4",
    "react-fontawesome": "^1.6.1",
    "react-image-lightbox": "^5.1.0",
    "react-imask": "^5.1.7",
    "react-leaflet": "^2.2.1",
    "react-leaflet-control": "^2.1.1",
    "react-plotly.js": "^2.3.0",
    "react-sparklines": "^1.7.0",
    "react-text-mask": "^5.4.3",
    "tcp-ping": "^0.1.1",
    "url-exists": "^1.0.3",
    "url-loader": "^1.0.1"
  }
}

网页包构建配置

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Config directories
const MAIN_SRC_DIR = path.resolve(__dirname, 'main-window/');
const CONNECT_SRC_DIR = path.resolve(__dirname, 'connect-window/');
const ELECTRON_SRC_DIR = path.resolve(__dirname, 'Electron/');
const OUTPUT_DIR = path.resolve(__dirname, 'dist/');

// Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up
const defaultInclude = [MAIN_SRC_DIR, CONNECT_SRC_DIR];

module.exports = {
  mode: 'production',
  entry: {
    main: ELECTRON_SRC_DIR + '/index.js',
    bigWindow: MAIN_SRC_DIR + '/mainIndex.js',
    connectWindow: CONNECT_SRC_DIR + '/connectIndex.js'
  },
  resolve: {
    extensions: ['.html', '.js', '.json', '.scss', '.css'],
    alias: {
      leaflet_css: __dirname + '/node_modules/leaflet/dist/leaflet.css',
      leaflet_marker:
        __dirname + '/node_modules/leaflet/dist/images/marker-icon.png',
      leaflet_marker_2x:
        __dirname + '/node_modules/leaflet/dist/images/marker-icon-2x.png',
      leaflet_marker_shadow:
        __dirname + '/node_modules/leaflet/dist/images/marker-shadow.png'
    }
  },
  output: {
    path: OUTPUT_DIR,
    publicPath: './',
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' }
        ],
        include: defaultInclude
      },
      {
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
      },
      {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'babel-loader',

            options: {
              presets: ['@babel/react'],
              plugins: ['@babel/plugin-proposal-class-properties']
            }
          }
        ],
        exclude: '/node_modules/',
        include: defaultInclude
      },
      {
        test: /\.(jpe?g|png|gif|ico)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'img',
              name: '[name].[ext]'
            }
          }
        ]
        // loader: 'file-loader?name=img/[name].[ext]'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts',
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  target: 'electron-renderer',
  plugins: [
    new HtmlWebpackPlugin({
      // inject: false,
      title: 'Система ОАИСКГН',
      chunks: ['bigWindow'],
      filename: OUTPUT_DIR + '/mainIndex.html'
    }),
    new HtmlWebpackPlugin({
      // inject: false,
      title: 'Соедниние с сервером',
      chunks: ['connectWindow'],
      filename: OUTPUT_DIR + '/connectIndex.html'
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ],
  stats: {
    colors: true,
    children: false,
    chunks: false,
    modules: false
  }
};

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Config directories
const MAIN_SRC_DIR = path.resolve(__dirname, 'main-window/');
const CONNECT_SRC_DIR = path.resolve(__dirname, 'connect-window/');
const ELECTRON_SRC_DIR = path.resolve(__dirname, 'Electron/');
const OUTPUT_DIR = path.resolve(__dirname, 'dist/');

// Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up
const defaultInclude = [MAIN_SRC_DIR, CONNECT_SRC_DIR];

module.exports = {
  mode: 'production',
  entry: {
    main: ELECTRON_SRC_DIR + '/index.js',
    bigWindow: MAIN_SRC_DIR + '/mainIndex.js',
    connectWindow: CONNECT_SRC_DIR + '/connectIndex.js'
  },
  resolve: {
    extensions: ['.html', '.js', '.json', '.scss', '.css'],
    alias: {
      leaflet_css: __dirname + '/node_modules/leaflet/dist/leaflet.css',
      leaflet_marker:
        __dirname + '/node_modules/leaflet/dist/images/marker-icon.png',
      leaflet_marker_2x:
        __dirname + '/node_modules/leaflet/dist/images/marker-icon-2x.png',
      leaflet_marker_shadow:
        __dirname + '/node_modules/leaflet/dist/images/marker-shadow.png'
    }
  },
  output: {
    path: OUTPUT_DIR,
    publicPath: './',
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' }
        ],
        include: defaultInclude
      },
      {
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
      },
      {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'babel-loader',

            options: {
              presets: ['@babel/react'],
              plugins: ['@babel/plugin-proposal-class-properties']
            }
          }
        ],
        exclude: '/node_modules/',
        include: defaultInclude
      },
      {
        test: /\.(jpe?g|png|gif|ico)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'img',
              name: '[name].[ext]'
            }
          }
        ]
        // loader: 'file-loader?name=img/[name].[ext]'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts',
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  target: 'electron-renderer',
  plugins: [
    new HtmlWebpackPlugin({
      // inject: false,
      title: 'Система ОАИСКГН',
      chunks: ['bigWindow'],
      filename: OUTPUT_DIR + '/mainIndex.html'
    }),
    new HtmlWebpackPlugin({
      // inject: false,
      title: 'Соедниние с сервером',
      chunks: ['connectWindow'],
      filename: OUTPUT_DIR + '/connectIndex.html'
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ],
  stats: {
    colors: true,
    children: false,
    chunks: false,
    modules: false
  }
};