electron-webpack

2.8.2 verified Sat Apr 25 auth: no javascript maintenance

electron-webpack simplifies webpack configuration for Electron apps, providing a pre-configured setup for main and renderer processes with HMR, Babel, and CSS support. Current stable version is 2.8.2 (latest release March 2021). It is a mature project with periodic bug fixes; development appears to have slowed but it remains functional for webpack 4. Key differentiators: updates via a single module instead of boilerplate, automatic Babel config based on Electron version, and add-on system for TypeScript, Less, etc. Note: it does not support webpack 5, and the project is in maintenance mode.

Common errors

error Error: Cannot find module 'webpack' ↓

cause Missing webpack as a dependency; electron-webpack requires webpack as a peer dependency.

fix

Run: npm install webpack@^4.42.1 --save-dev

error Error: The 'main' field in package.json must point to a valid entry file for Electron ↓

cause electron-webpack expects specific directory structure (src/main/index.js) or custom config.

fix

Ensure you have src/main/index.js or configure entry in package.json under 'electronWebpack'.

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Missing webpack loader for the file type (e.g., .vue, .ts) without adding appropriate add-on package.

fix

Install and configure add-on like electron-webpack-vue or electron-webpack-ts.

Warnings

gotcha electron-webpack is designed for webpack 4 and does not support webpack 5. Upgrading webpack to 5 will break builds. ↓

fix Keep webpack at version ^4.42.1 or consider migrating to electron-forge or other webpack 5 solutions.

deprecated The project is in maintenance mode with no recent major updates. New Electron features may not be supported. ↓

fix Evaluate alternative tools like electron-forge with webpack plugin or custom webpack config.

gotcha Babel configuration is auto-derived from Electron version; custom .babelrc may conflict. ↓

fix Avoid custom Babel config; use electron-webpack's 'babel' option in package.json if needed.

gotcha CSS Modules require specific file naming convention (e.g., *.module.css) to be enabled. ↓

fix Name CSS files with *.module.css extension to use CSS Modules.

gotcha Node.js >=10 required; older versions may produce errors. ↓

fix Use Node.js 10 or later.

Install

npm install electron-webpack

yarn add electron-webpack

pnpm add electron-webpack

Imports

electron-webpack
wrong
```
const electronWebpack = require('electron-webpack')
```
correct
```
import electronWebpack from 'electron-webpack'
```
ESM vs CJS: electron-webpack ships both ESM and CJS, but the recommended usage is via CLI or config, not direct import of the main module.

Quickstart

Shows minimal package.json scripts to run dev and build commands using electron-webpack CLI.

{
  "scripts": {
    "dev": "electron-webpack dev",
    "build": "electron-webpack build"
  },
  "devDependencies": {
    "electron-webpack": "^2.8.2",
    "webpack": "^4.42.1",
    "electron": "^18.0.0"
  }
}
// Ensure package.json has main and renderer entries as per docs.
// Run: yarn install && yarn dev