Skip to content


Although electron-webpack is provided as a single module, you can also install add-ons. Add-ons are made available to help setup certain frameworks that may require a lot of extra configuration or dependencies, such as TypeScript or Vue.js.

These add-ons are completely optional and may not support all use cases. If you need something more custom, please know that the entirety of webpack‘s documentation still applies to electron-webpack (more info).

Current Add-ons:

JavaScript Frameworks


Adds support for Vue component files through the use of vue-loader. In addition, vue-devtools will also be installed for development purposes.

yarn add vue electron-webpack-vue --dev

Adding TypeScript support

Install the TypeScript add-on, followed by adding the below file to shim Vue component files.

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue

And of course, make sure to let vue-loader know you want to use TypeScript in your component file using the lang="ts" attribute.


<script lang="ts">
  /* your TypeScript code */


Adding ESLint support

Install the ESLint add-on, install eslint-plugin-html, and add the following additional configurations.

Install html plugin to lint Vue component files:

yarn add eslint-plugin-html --dev

module.exports = {
  plugins: [

React JSX

Add support for compiling JSX files:

yarn add @babel/preset-react --dev

Adding TypeScript support for JSX (.tsx files)

Install the TypeScript add-on, followed by extending your tsconfig.json to include the jsx compiler option as below:

    "extends": "./node_modules/electron-webpack/tsconfig-base.json",
    "compilerOptions": {
        "jsx": "react"



@babel/preset-env is automatically configured based on your electron version.

All direct dev dependencies babel-preset-* and babel-plugin-* are automatically configured also.


Add support for script file linting using eslint. Internally uses eslint, eslint-loader, eslint-friendly-formatter, and makes babel-eslint available if needed.

yarn add electron-webpack-eslint --dev

Create .eslintrc.js in the root directory:

module.exports = {
  /* your base configuration of choice */
  extends: 'eslint:recommended',

  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  env: {
    browser: true,
    node: true
  globals: {
    __static: true


Add support for compiling TypeScript script files. Internally uses both ts-loader and fork-ts-checker-webpack-plugin to compile *.ts. Note that entry files can also use the *.ts extension.

yarn add typescript electron-webpack-ts --dev

Create tsconfig.json in the root directory:

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


Add support for compiling Less style files.

yarn add less less-loader --dev


Add support for compiling Sass/SCSS style files.

yarn add node-sass sass-loader --dev


Add support for compiling EJS template files.

yarn add ejs ejs-html-loader --dev


Add support for compiling Nunjucks template files:

yarn add nunjucks nunjucks-loader --dev

UI Libraries


Once you have the Vue.js add-on installed, electron-webpack will internally support iView’s “import on demand” feature. No further setup is necessary.


Once you have the element-ui installed, electron-webpack will internally support Element’s “import on demand” feature. No further setup is necessary.


Build Notifications

Provide OS-level notifications from webpack during development.

yarn add webpack-build-notifier --dev