Quick Start – Setting up Webpack for a static app

Happy Sunday folks!

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.

Screen Shot 2017-05-14 at 4.57.29 PM

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.

// package.json

{
 "name": "algebra-game",
 "version": "1.0.0",
 "main": "dist/game.js",
 "author": "Nidhi Reddy",
 "license": "MIT",
 "scripts": {
    "watch": "webpack --progress --colors --watch --config ./webpack.config.js",
    "start": "webpack-dev-server --progress --inline --hot",
    "build": "webpack --config ./webpack.config.js",
    "deploy": "gh-pages -d dist"
 },
 "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "gh-pages": "^1.0.0",
    "path": "^0.12.7",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
 },
 "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
 }
}

// webpack.config.js

var path = require('path');
var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");

const config = {
  context: __dirname, //current folder as the reference to the other paths
  entry: './game.js',
  output: {
     path: path.resolve(__dirname, 'dist'), //where the compiled JavaScript file should be saved
     filename: './game.js' //name of the compiled JavaScript file
  },
  module: {
  loaders: [
   {
     test: /\.js?$/, //translate and compile ES6 with JSX into ES5
     exclude: /node_modules/,
     loader: 'babel-loader',
     query: { //query configuration passed to the loader
         presets: ['react', 'es2015']
     }
    }
   ]
 },
  devServer: {
     hot: true,
     contentBase: './dist'
 }
};

module.exports = config;

Depending on your file structure, you might have to update the contentBase, entry, and output fields accordingly.

Serve and watch these files!

If you’re using yarn, run the command yarn start, and if you’re using good ol’ npm, you can similarly run the comamnd npm start.   You should see your application running on localhost:8080.

Hope this helps!  If you have any questions / grievances, get at me on Twitter @nerdyreddy.

Next steps (this part is just to hold myself accountable :D) – 

  • I do want to convert this to Webpack 2.0 since 1.0 is already deprecated (tech moves so fast, remember when Webpack 1.0 was like *the thing* last year?
  • I need to add a SASS loader and figure out the best way to structure my components, since right now they’re all located in my algebra.js file

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s