neurotic musings on creative tech by @nerdyreddy

Archives

Quick Start – Setting up Webpack for a static app

When I was in elementary school, we had a worksheet game in one of my classes that secretly taught us algebra. Today I am attempting to recreate it in a digital, playable format using React, Webpack, ES6, and yarn (which I used for the first time today rather than using npm) .

I personally found it a little tricky to set up Webpack 1.0 (I plan on replacing this with 2.0 soon, I just am more familiar with 1.0 at the moment). All I wanted was to compile my files and have it hot reload for my static application, but it was surprisingly hard to find a simple example of this.

Here’s what I did.

A screenshot of my project file structure.

My goal

All I wanted to do is compile everything in my root ./game.js to ./dist/game.js, and I wanted it so that anytime I made a change and saved my file it would reload on localhost.

Solution

Here is what my package.json and webpack.config.js looked like, so that whenever I ran the command yarn start, it would compile my files and serve my index.html file on my local server.