electron-webpack

electron-webpack

Configuration and scripts to compile Electron applications that use electron-vue boilerplate project structure.

Install

yarn add webpack electron-webpack --dev

And install support for various languages and frameworks — typescript, vue and less if need.

Yarn is recommended instead of npm.

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 typescript electron-webpack-ts --dev

Create tsconfig.json in the project root directory:

{
  "extends": "./node_modules/electron-webpack/tsconfig-base.json"
}

If you use Vue.js, create vue-shims.d.ts in the src/renderer

declare module "*.vue" {
  import Vue from "vue"
  export default Vue
}

Vue.js

yarn add vue electron-webpack-vue --dev

iView

"Import on demand" feature is supported out of the box.

Less

yarn add less-loader less --dev

Package Scripts

You can add following scripts to your package.json:

{
  "scripts": {
    "dev": "node node_modules/electron-webpack/dev-runner.js",
    "compile": "webpack --bail --env.production --config node_modules/electron-webpack/webpack.app.config.js",
    "dist": "yarn compile && electron-builder",
    "dist-dir": "yarn compile && electron-builder --dir -c.compression=store -c.mac.identity=null"
  }
}

• yarn dev Run app in development.
• yarn compile Compile app for production. No need to call this script explicitly, only if you want to inspect your compiled app.
• yarn dist Build app and package in a distributable format for production.
• yarn dist-dir Build app and quickly package in a distributable format for test how does the app work if packed.

Provided Configurations Files

Webpack documentation is fully applicable. For example, to build for production, specify --env.production.

• node_modules/electron-webpack/webpack.main.config.js Compile main.
• node_modules/electron-webpack/webpack.renderer.config.js Compile renderer.
• node_modules/electron-webpack/webpack.app.config.js Compile both main and renderer.

Application Renderer Dependencies

All renderer dependencies should be in the devDependencies. e.g. vue and vue-router should be in the devDependencies. Because Webpack will smartly copy only required files and as result, application size will be minimal (electron-builder cannot do such filtering, because in general it is not applicable for node modules). No doubt, files allows you to filter out anything you want, but it is tedious to write and maintain.

DLL

The Dll provide means to split bundles in a way that can drastically improve build time performance.

Supported out of the box, specify in the package.json:

"electronWebpack": {
  "renderer": {
    "dll": [
      "vue",
      "iview/dist/styles/iview.css"
    ]
  }
}

Please note — due to webpack issue, not all libraries are supported for now.

White-listing Externals

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

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

Differences between electron-compile

• Hot Module Replacement for virtually anything. 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).

So, if you doubt what to use and no suitable boilerplate — use electron-compile. If need, later you can easily migrate to webpack.

Debug

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

DEBUG=electron-webpack:*