A no-nonsense guide to webpack, Electron & WebAssembly — Part 1

I wanted an all-in-one Hello World, so I wrote one

Photo by La-Rel Easter on Unsplash

I recently attended Covalence, the first conference dedicated to Electron. The talks inspired me to write some code (an activity a rarely get to do these days.) I’m excited about WebAssembly so this gave me a good excuse to have a play.

I don’t know about you but I learn how to combine software by starting with the different quickstarts, tweaking them and iteratively combining them. To my surprise, I couldn’t find a guide on Electron, webpack and WebAssembly. So as I started trolling GitHub I thought, “maybe someone else is interested in this. I should blog it!”

So here’s my game plan for the different parts:

• webpack tl;dr
• Electron tl;dr
• C++ to WebAssembly with Emscripten
• Bringing it all together

Let’s get started!

webpack tl;dr

You probably already know that webpack is a static module bundler for modern JavaScript applications. Here’s a frankenstein starter based on the detailed, multi-part Guides in the webpack docs. For now I’ll skip some of the fanciest features like Tree Shaking, Code Splitting, Lazy Loading, etc. in favor of the basics you need for development and simple production deployments.

Create a project folder that looks like this:

webpack-demo
|- /src
  |- FiraCode-Regular.woff
  |- FiraCode-Regular.woff2
  |- icon.png
  |- index.js
  |- print.js
  |- style.css
|- package.json
|- webpack.common.js
|- webpack.dev.js
|- webpack.prod.js

and download the source from here:

I used Fira Code and the webpack logo for my demo.

With everything on your machine, run npm install to install the dependencies, npm start to launch a server and npm run build to get builds you can serve from a webserver.

We’ll come back to webpack in a future post but for now we’re done. In the next post we’ll look at Electron.