Add-ons

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 documenation still applies to electron-webpack (more info).

Current Add-ons


JavaScript Frameworks

Vue.js

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

Install
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.

src/renderer/vue-shims.d.ts

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.

<template></template>

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

<style></style>

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

.eslintrc.js

module.exports = {
  plugins: [
    'html'
  ]
}

React JSX

Add support for compiling JSX files.

yarn add babel-preset-react --dev

Pre-processors

Babel

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

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

ESLint

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

Install
yarn add electron-webpack-eslint --dev
Create .eslintrc.js in 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
  }
}

TypeScript

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.

Install
yarn add typescript electron-webpack-ts --dev

Create tsconfig.json in root directory

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

Less

Add support for compiling Less style files.

Install
yarn add less less-loader --dev

Sass/SCSS

Add support for compiling Sass/SCSS style files.

Install
yarn add node-sass sass-loader --dev

EJS

Add support for compiling EJS template files.

Install
yarn add ejs ejs-html-loader --dev

Nunjucks

Add support for compiling Nunjucks template files.

Install
yarn add nunjucks nunjucks-loader --dev

UI Libraries

iView

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.


Miscellaneous

Build Notifications

Provide OS-level notifications from webpack during development.

Install
yarn add webpack-build-notifier --dev

results matching ""

    No results matching ""