CODEWITHSUNDEEP
webpackelectron
Rutger
Rutger

Reputation: 1163

Why use Webpack with Electron?

I am experimenting with electron. I see a lot of examples that use webpack.

But why use something like webpack? Because as far as I can tell electron supports require('module').

Upvotes: 24

Views: 40147

Answers (4)

apxp
apxp

Reputation: 5914

It is not webpack which is used in electron. The require function is part of the node.js, which is the base for electron.

More information about the modules from the node.js docs are available here.

But, as long as webpack is also available as a node module, it is also possible to use webpack with electron. At this point you are also able to use the build on the fly in production, because node and chrome are availiable inside one app.

Why use webpack with electron?

When you use react or vue.js components maybe it is a good idea to separate the components. To bundle your code into one app you need browserfy or webpack. That would be, for example, a good case on why to use it.

Upvotes: 12

Pratap Dessai
Pratap Dessai

Reputation: 139

Good documentation to get started with: Webpack Electron Build

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

Upvotes: 4

Lokua
Lokua

Reputation: 576

Webpack is not just a JS module bundler; it can be used for bundling static assets (inline base64 of images, for example), compiling Sass/Less/Stylus/CSS-Modules, dead code elimination, tree-shaking, and more. With the proper loaders and config, one only needs to require('any-type-of-file.extension') when actively developing. In my personal experience, however, more than all of that, Webpack is valuable because of it's dev-server and Hot Module Replacement (HMR), which makes Live Reload feel like something from the dark ages.

To recap, you get all the combined power of Gulp/Browserify/Rollup, but with HMR on top, all within a single tool (and lots and lots and lots and lots of loaders ;).

Setting up Webpack is a PITA, no doubt, but if you plan on working on an Electron app for a good amount of time, the time saved from HMR alone is well worth it.

Upvotes: 16

Ana Betts
Ana Betts

Reputation: 74692

There is no reason to use Webpack in Electron, check out electron-compile to use Babel and LESS in Electron.

Upvotes: 7

Related Questions