Angular Blackjack: Converting to Webpack

It has been a while since I’ve touched my Angular Blackjack project. When I first started working on it, I created a build process that used gulp-concat to simply merge all our application files into one. Let’s bring our application into 2015, ES2015 that is, with a modular loading system.

For this exercise I decided to use Webpack. I could’ve easily used jspm or browserify, but Kent C. Dodds‘s series on was easy to follow and very informative:

For a quick TL;DR, you can see the pull request of all the changes made:

I’m just going to give a general overview of what I worked on and changed instead of the detailed step by step this post. The three main things I changed were:

  1. Installing and configuring webpack
  2. Bower to NPM
  3. Javascript File Changes
  4. Index changes

The first thing is to install webpack and all of the loaders for the different file types. I’ve also decided to use the ES6 style “import from” module loading syntax, so we’ll need to install babel as well. Check out package.json and webpack.config.js for these changes.

Since webpack plays more nicely with npm modules over bower modules, I’ve switch my repo’s dependencies to npm. I also added a “start” and a “build” script to the package.json.

Next, I’ve gone through and converted all of my *.module.js files into index.js that export the angular modules. I’ve also moved all of the module registrations of services, controllers, and directives to the index.js files. Heres our card/index.js file for example:

import angular from 'angular';
import BlackjackCard from './card.directive';
import CardService from './card.service';
import BlackjackHand from './card.hand.directive';
let cardModule = angular.module('blackjack.card', []);
.directive('blackjackCard', BlackjackCard)
.factory('CardService', CardService)
.directive('blackjackHand', BlackjackHand);
export default cardModule;

view raw


hosted with ❤ by GitHub

The actual implementations are simply exported at the end of the file.

Finally, we’ve had webpack package all of our project files and requirements into bundle.js, so we can remove all of our script and link tags out of the index.html file.

Update: I’m not 100% happy with the way bootstrap is required because it seems to be bloating my bundle file with lots of unnecessary fonts and images. I’ll be looking into it in the future.

Leave a Reply

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

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

Facebook photo

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

Connecting to %s