这是我的第一个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_modules + package.json到resources/app文件夹的简便方法
https://electronjs.org/docs/tutorial/application-distribution#manual-distribution
resources/app folder contents
启动Electron.exe将运行默认应用程序，并且如果我从resources文件夹中删除默认应用程序，则不会执行任何操作。
接下来，我尝试在dist文件夹中运行全局安装的electron-packager（也存在node_modules + package.json）。
c:\_Demo\osm-electron-gui\dist>electron-packager .
Packaging app for platform win32 x64 using electron v6.0.7
WARNING: Make sure that .NET Framework 4.5 or later and Powershell 3 or later are installed, otherwise extracting the Electron zip file will hang.
数小时之内什么也不会发生。是的，已经安装了NET和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"
}
}
Webpack构建配置
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
}
};