Electron 本地开发实现热重载的几种常见的方法

在 Electron 中实现 热重载（hot reload），可以通过以下几种方式来完成：

🔥 方法 1: 使用 electron-reload 插件（最简单的方法）

electron-reload 是最简单的热重载工具。只需几行代码即可实现：

1. 安装依赖

   npm install electron-reload --save-dev
   

2. 在 main.js 或 index.js 中引入并配置

   在 Electron 主进程的入口文件中（通常是 main.js）添加以下代码：

   require('electron-reload')(__dirname, {
     electron: require(`${__dirname}/node_modules/electron`)
   });
   
   const { app, BrowserWindow } = require('electron');
   
   function createWindow() {
     const win = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true,
       },
     });
   
     win.loadFile('index.html');
   }
   
   app.whenReady().then(createWindow);
   

3. 自动重载文件类型

   默认情况下，electron-reload 会监听所有文件的变更（包括 JS、HTML、CSS）。如果需要监听特定类型的文件，可以这样配置：

   require('electron-reload')(__dirname, {
     electron: require(`${__dirname}/node_modules/electron`),
     files: [
       '**/*.js',
       '**/*.html',
       '**/*.css'
     ]
   });
   

🔥 方法 2: 使用 electronmon（结合 nodemon 和 electron）

1. 安装依赖

   npm install --save-dev electronmon
   

2. 在 package.json 中添加启动脚本

   "scripts": {
     "start": "electronmon ."
   }
   

3. 启动应用

   npm start
   

electronmon 会监听代码变化并自动重新启动 Electron 应用。

🔥 方法 3: 使用 webpack + webpack-dev-server（高级配置）

如果你的项目结构较复杂，可以使用 Webpack 实现更细粒度的热重载，尤其适合有打包需求的项目：

1. 安装依赖

   npm install --save-dev webpack webpack-cli webpack-dev-server electron-webpack
   

2. 配置 webpack.config.js

   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist')
     },
     devServer: {
       contentBase: path.join(__dirname, 'dist'),
       hot: true
     },
     mode: 'development'
   };
   

3. 修改 Electron 加载方式

   在 main.js 中：

   win.loadURL('http://localhost:8080');
   

4. 运行项目

   npx webpack serve
   npm run electron
   

✅ 推荐方案

如果只是简单的桌面应用开发，electron-reload 是最简单直接的方案。对于需要打包和复杂构建的项目，可以选择 Webpack。你想要哪种方式的配置示例？