Introducing Webpack

Pretty much every major language in the world has a module system. Modules are just bits of stuff that can be pulled in and used.

Every major language that is, apart from the three we use most: JavaScript, HTML and CSS. This is probably more of an issue than you have ever realised. If you've never used modules, you might be wondering why you need them. To this, I'd answer that you'll have to trust me on this for now. Give it 5 minutes, and then see how you feel.

Webpack lets you define your assets as modules, and choose how to build them

Webpack allows you to define all your front end assets as modules. It also allows you to build these assets from precursor languages. Want to write SASS instead of CSS? Webkit can compile that for you. Need JSX, or TypeScript, of CoffeeScript? Webkit has you covered.

Installation

Installation is via npm:

npm install webpack -g

Compiling JavaScript

Give Webpack an entry point and an output file:

webpack ./app.js app.bundle.js

Creating a JavaScript module

We can define modules in JavaScript using the CommonJS syntax, as for Node. Any file can export an object or funtion by writing to module.exports, like so:

cats.js

var cats = ['dave', 'henry', 'martha'];
module.exports = cats;

Any other file can then require that code from the file, by specifying an absolute path to the file:

app.js

cats = require('./cats.js');
console.log(cats);

Requiring node modules

We can also require any other node module from npm. Rather than a path, we give the name of the module, like so:

var ng = require('angular2');

We must have first installed angular2 into our node modules directory using:

npm install angular2

We now have a local copy of Angular in a local variable.

Exercise - Building a Test

In this exercise, we are going to build a simple Jasmine test using Webpack.

The cool thing about making tests this way, is that we can just require JavaScript modules right into our tests, and then test them.

Open up the Webpack exercise_1 start point. You'll find a simple Maths app. The maths object is now a module, and you can require it.

In specs.js require maths/maths.specs
In specs/maths.specs.js require specs/maths
Write specs for the maths object.

Once you've done it, build the app with:

webpack specs.js specs.build.js

Extension

Modify maths.js so it looks like this:

module.exports = {
  sum: require('./maths.sum'),
  power: require('./maths.power'),
  div: require('./maths.div'),
}

Break the functions out into separate files and require them.

Make sure you write specs.