Electron+React开发：多窗口热加载实现方案咨询

不需要为每个窗口单独运行React程序，核心是用同一个Webpack Dev Server统一服务所有窗口的React代码，配合React热模块替换（HMR）实现全窗口热加载，以下是具体实现方案：

1. 统一Webpack Dev Server配置 #

方案A：多入口+多HTML文件 #

在Webpack配置中定义多个入口，对应不同窗口的React入口文件，同时用HtmlWebpackPlugin生成每个窗口对应的HTML文件：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: {
    main: './src/renderer/mainWindow/index.jsx',
    preferences: './src/renderer/preferencesWindow/index.jsx'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'main.html',
      chunks: ['main'], // 关联主窗口的bundle
      template: './public/index.html'
    }),
    new HtmlWebpackPlugin({
      filename: 'preferences.html',
      chunks: ['preferences'], // 关联偏好窗口的bundle
      template: './public/index.html'
    })
  ],
  devServer: {
    port: 3000,
    hot: true, // 开启热加载
    open: false
  },
  // 其他基础配置：babel loader、react-refresh等
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
            plugins: ['react-refresh/babel']
          }
        }
      }
    ]
  }
};

方案B：单入口+URL参数区分（更简洁） #

用同一个React入口文件，通过URL参数判断要渲染的窗口组件，无需维护多个HTML文件：

// src/renderer/index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import MainWindow from './components/MainWindow';
import PreferencesWindow from './components/PreferencesWindow';

// 从URL获取窗口类型参数
const windowType = new URLSearchParams(window.location.search).get('window');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {windowType === 'main' ? <MainWindow /> : <PreferencesWindow />}
  </React.StrictMode>
);

// 开启热模块替换
if (module.hot) {
  module.hot.accept();
}

2. Electron窗口加载配置 #

在Electron主进程中，让每个窗口根据环境加载Dev Server地址或本地文件：

// src/main/index.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow(windowType) {
  const win = new BrowserWindow({
    width: windowType === 'main' ? 1000 : 600,
    height: 700,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  if (process.env.NODE_ENV === 'development') {
    // 方案A加载对应HTML文件
    // win.loadURL(`http://localhost:3000/${windowType}.html`);
    // 方案B带参数加载
    win.loadURL(`http://localhost:3000?window=${windowType}`);
    win.webContents.openDevTools();
  } else {
    // 生产环境加载本地编译后的文件
    win.loadFile(path.join(__dirname, `../dist/${windowType}.html`));
  }
}

app.whenReady().then(() => {
  createWindow('main');
  // 可通过菜单/按钮触发创建偏好窗口，这里直接初始化示例
  createWindow('preferences');

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow('main');
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

3. 完善React热刷新配置 #

如果使用react-refresh，需在Webpack中加入对应插件：

// webpack.config.js
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    // ...HtmlWebpackPlugin配置
    new ReactRefreshWebpackPlugin()
  ],
  devServer: {
    hot: true,
    client: {
      overlay: true // 实时显示编译错误
    }
  }
};

关键注意事项 #

• 所有窗口必须指向同一个Dev Server端口，避免端口冲突
• 开发环境下无需额外跨域配置，因为Electron窗口和Dev Server都在localhost下
• 若用URL参数区分窗口，可改用MemoryRouter替代BrowserRouter，避免不同窗口的URL历史互相干扰

内容的提问来源于stack exchange，提问作者fabyday