webpack.electron.build Open in urlscan Pro
2a05:d014:275:cb01::c8  Public Scan

Form analysis
1 forms found in the DOM

Name: search —

<form class="md-search__form" name="search">
  <input type="text" class="md-search__input" name="query" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
  <label class="md-icon md-search__icon" for="__search"></label>
  <button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">  </button>
</form>

Text Content

Skip to content
build

electron-webpack Introduction

Type to start searching
electron-userland/electron-webpack
 * 902 Stars
 * 172 Forks

build electron-webpack
electron-userland/electron-webpack
 * 902 Stars
 * 172 Forks

 * Introduction Introduction
   Table of contents
    * Overview
    * Quick Start
       * Next Steps

 * Core Concepts
 * Development
   Development
    * Development
    * Add-ons
    * Configuration
    * CLI Commands
    * Dll Bundle Splitting
    * Environment Variables
    * Extending as a Library
    * Modifying Webpack Configurations
    * Using Static Assets

 * Project Structure
 * Building
 * Miscellaneous
   Miscellaneous
    * Dependency Management
    * Technical Differences of electron-compile

Table of contents
 * Overview
 * Quick Start
    * Next Steps


ELECTRON-WEBPACK ¶

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

Here are some of the awesome features you’ll find using electron-webpack:

 * Detailed documentation
 * Use of webpack for source code bundling
 * Use of webpack-dev-server for development
 * HMR for both renderer and main processes
 * Use of @babel/preset-env that is automatically configured based on your
   electron version
 * Ability to add custom webpack loaders, plugins, etc.
 * Add-ons to support items like TypeScript, Less, EJS, etc.


QUICK START¶

Get started fast with electron-webpack-quick-start.

# create a directory of your choice, and copy template using curl
mkdir my-project && cd my-project
curl -fsSL https://github.com/electron-userland/electron-webpack-quick-start/archive/master.tar.gz | tar -xz --strip-components 1

# or copy template using git clone
git clone https://github.com/electron-userland/electron-webpack-quick-start.git
cd electron-webpack-quick-start
rm -rf .git

# install dependencies
yarn




If you already have an existing project, or are looking for a custom approach
outside of the quick start template, make sure to read over the Core Concepts,
Project Structure, and Development sections of electron-webpack‘s documentation.


NEXT STEPS¶

Make sure to take advantage of the detailed documentation that electron-webpack
provides. It covers everything from how things work internally, adding custom
configurations, and building your application.

Next Core Concepts

powered by MkDocs and Material for MkDocs