electron-webpack

Configurations and scripts to compile Electron applications.

Because setting up webpack in the electron environment shouldn't be difficult.

Overview

Modern web development practices today require a lot of setup with things like webpack to bundle your code, babel for transpiling, eslint for linting, and so much more that the list just goes on. Unfortunaly when creating electron applications, all of that setup just became much more difficult. The primary aim of electron-webpack is to eliminate all preliminary setup with one simple install so you can get back to developing your application.

Why create a module and not a full boilerplate?

If you've been in the JavaScript world for even a short period of time, you are very aware that things are always changing, and development setup is no exclusion. Putting all development scripts into a single updatable module just makes sense. Sure a full featured boilerplate works too, but doing also involves needing to manually update those pesky webpack configuration files that some may call magic when something new comes out.

Install

yarn add webpack electron-webpack --dev
yarn add source-map-support
Install support for various languages and frameworks — TypeScript, React, Vue.js, Less if need.

Please use Yarn, npm is strongly not recommended.

Check out the detailed documentation.

Differences between electron-compile

Hot Module Replacement for virtually anything and even for main process. electron-compile live reload is limited and works only for some file types.
Faster Builds (e.g. typescript or generic).
No runtime dependencies.
... and so on. electron-compile is not comparable to webpack because webpack is widely used and popular. There are a lot features, loaders and plugins. And because community is big, answers to any question. Special tool for Electron not required, electron is directly and explicitly supported by webpack.

But keep things simple. electron-compile offers you zero-config setup without predefined project structure and simple on the fly runtime transformation. And for simple projects, even direct usage of typescript/babel maybe enough (example).

Notes

source-map-support is recommended and supported out of the box, simply install it yarn add source-map-support and that's all.
webpack-build-notifier is supported, simply install it yarn add webpack-build-notifier --dev and it will automatically enabled for development.

Debug

Set the DEBUG environment variable to debug what electron-webpack is doing:

DEBUG=electron-webpack*

scvnc / electron-webpack