webpack-electron-reload

1.0.1 verified Sat Apr 25 auth: no javascript

Webpack plugin that automatically restarts the Electron main process when webpack recompiles. Version 1.0.1, no recent updates. It is a lightweight alternative to electron-reload-webpack-plugin, requiring Electron as a peer dependency. The plugin is used with webpack's watch mode and integrates into the webpack build lifecycle. Suitable for development workflows where quick iteration on the Electron main process is needed.

Common errors

error ElectronReloadPlugin is not a constructor ↓

cause Forgetting to call the factory function with options before instantiating.

fix

Use: const pluginFactory = require('webpack-electron-reload')({path: '...'}); plugins: [ pluginFactory() ];

error ENOENT: no such file or directory, stat '.../dist/main.js' ↓

cause The path option points to a non-existing file (electron entry point not built yet).

fix

Ensure the output file exists before webpack watch starts, or use a build step that compiles before watch.

error Cannot find module 'electron' ↓

cause Electron is not installed or not in node_modules.

fix

Run 'npm install electron --save-dev' (or '--save') as the package requires Electron as a peer dependency.

Warnings

gotcha Path option must be absolute or relative to project root; relative paths are resolved from process.cwd(). ↓

fix Use path.join(__dirname, './dist/main.js') or path.resolve('./dist/main.js') for reliable absolute path.

gotcha The plugin only restarts Electron when webpack recompiles; it does not trigger a restart on initial build. ↓

fix Ensure Electron is started manually for the first build or use a script that starts webpack and electron sequentially.

breaking The plugin's factory function must be called with options at import time (not lazily), otherwise the plugin will not work. ↓

fix Always call the require result immediately with options: const pluginFactory = require('webpack-electron-reload')(options);

Install

npm install webpack-electron-reload

yarn add webpack-electron-reload

pnpm add webpack-electron-reload

Imports

ElectronReloadPlugin (default export as a factory function)

wrong

import ElectronReloadPlugin from 'webpack-electron-reload'; // causes runtime error because the export is a factory function

correct

const ElectronReloadPlugin = require('webpack-electron-reload')({ path: '...' });

The package exports a factory function that must be called with options immediately; the return value is the actual plugin constructor.

Plugin usage in webpack config

wrong

plugins: [ ElectronReloadPlugin ] // forgetting to call the factory function will pass the factory instead of plugin instance

correct

plugins: [ ElectronReloadPlugin() ]

The factory function returns a plugin class; instantiate it with 'new' or simply call it (it returns a new instance).

ESM import (experimental or with bundler)

wrong

import { ElectronReloadPlugin } from 'webpack-electron-reload'; // named export does not exist

correct

import webpackElectronReload from 'webpack-electron-reload';
const ElectronReloadPlugin = webpackElectronReload({ path: '...' });

Only a default export exists; it is a function that takes options and returns a plugin class.

Quickstart

Shows how to add the plugin to webpack config with path to Electron entry point, then run webpack in watch mode.

// webpack.config.js
const path = require('path');
const ElectronReloadPlugin = require('webpack-electron-reload')({
  path: path.join(__dirname, './dist/main.js'),
});

module.exports = {
  target: 'electron-main',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  plugins: [
    ElectronReloadPlugin(),
  ],
};

// Run with: webpack --watch