Why use Webpack with Electron?

Question

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').

Electron is on top of node. To inlcude a node module you use the require function. https://nodejs.org/dist/latest-v5.x/docs/api/modules.html — apxp, Apr 14 '16 at 06:00
I know so the only reason to use webpack (in this scenario) is when you want to bundle your files? — Rutger, Apr 14 '16 at 06:47
Yes. And what if your files are not JavaScript and needed to compile? For example react components have the ending jsx and need to be compiled into JS. — apxp, Apr 14 '16 at 07:55
Webpack is used to bundle front-end JS code, it has nothing to do with Electron, but you can use to compile the app you'll bundle and use along with Electron — martpie, Apr 14 '16 at 08:03
I was having hard time with webpack. In the end, I just need babel, and it works great — onmyway133, Aug 16 '18 at 12:19

score 16 · Answer 1 · answered Jul 25 '17 at 00:26

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.

electron-compile, an already popular development library for electron, appears to support HMR: https://github.com/electron/electron-compile#live-reload--hot-module-reloading — Scott Coates, Aug 29 '17 at 23:03
As @ScottCoates has already said, there are a few options for hot reloading in Electron which just watch the filesystem for changes. The whole reason HMR is needed in webpack is because there isn't any way for the browser to be notified of changes. This isn't necessary for Electron and it adds a TON of unnecessary complexity to get webpack HMR working in Electron. — Osman, Sep 05 '17 at 01:52

score 12 · Accepted Answer · edited Apr 07 '23 at 17:47

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.

There is no reason to bundle components. Compilation step is enough — chico, Jul 20 '18 at 13:25

score 8 · Answer 3 · answered Apr 14 '16 at 06:48

8

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

answered Apr 14 '16 at 06:48

Ana Betts

73,868
16
141
209

20

What if your webapp is using webpack and you don't want to rewrite everything? What if your are using vue.js components to structure your code? So they are reasons for it. – apxp Apr 14 '16 at 07:36
4

Why would using vue.js components require webpack – Ana Betts Apr 15 '16 at 16:33
3

If you use single file .Vue components, you need a module loader. – foundling Nov 08 '16 at 05:18
1

What if your web app is using Angular, and you are using ngAnnotate applied with webpack? – Vincil Bishop Mar 03 '17 at 14:24
1

@PaulBetts I am trying `const Settings = require('./js/settings.vue');` with bare electron, but I am getting a syntax error for the first line of my `.vue` file where it says that `<` is an unexpected character. So I assume that the built-in loader does not load single file vue components? – Konstantin Schubert May 24 '18 at 23:05
5

Deprecated... :) – Renan Gomes May 06 '19 at 07:20
As @Renan said, it's deprecated now. Do you know if it has a successor? – bluenote10 Jun 30 '19 at 08:18

score 4 · Answer 4 · edited Apr 07 '23 at 17:45

4

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.

edited Apr 07 '23 at 17:45

Sam Spencer

8,492
12
76
133

answered Aug 25 '18 at 11:32

Pratap Dessai

139
2
3

1

That project is currently [having issues](https://github.com/electron-userland/electron-webpack/issues/428), so I wouldn't recommend – Tyler Dane Jul 23 '21 at 14:42

Why use Webpack with Electron?

4 Answers4

Why use webpack with electron?

Linked