electron-webpack

electron-webpack

Scripts and configuration to compile Electron applications that use electron-vue boilerplate project structure.

Installation

yarn add webpack electron-webpack electron-webpack-ts electron-webpack-vue --dev

Differences between electron-compile

electron-compile:

• Hot Module Replacement not supported. Live Reload is limited and works only for some file types.
• Faster Builds (e.g. typescript or generic) not supported.
• 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. For simple projects, direct usage of typescript/babel maybe enough (example). electron-compile offers you zero-config setup without predefined project structure and simple on the fly runtime transformation.

So, if you doubt what to use and no suitable boilerplate — use electron-compile.

Languages and Frameworks

To keep your devDependencies size minimal, only JavaScript is supported out of the box (because even in a pure typescript project, JavaScript transpilation is required to import external dependencies on demand (e.g. ui libraries iView, Element)).

Special presets are used to ensure that you don't need to specify all required packages explicitly, — for example, electron-webpack-ts includes ts-loader and fork-ts-checker-webpack-plugin for you. But if you want, you can install loaders/plugins explicitly (it will be still detected and appropriate config applied).

JavaScript

Supported out of the box. Babel plugins and polyfills that you need based on your used version are determined automatically using babel-preset-env.

TypeScript

yarn add electron-webpack-ts --dev

Vue

yarn add electron-webpack-vue --dev

Less

yarn add less-loader less --dev

White-listing Externals

Please see White-listing Externals. electron-webpack supports setting this option in the package.json:

"electronWebpack": {
  "whiteListedModules": ["dependency-name"]
} 

Debug

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

DEBUG=electron-webpack:*