Forward Advance Learning

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('angular');

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

npm install angular

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

Building Angular

We can break an angular app up in several ways. The best way is to have one directory per component, then split the contents of that component across several files. For example. Say we have a cat app, hich can list cats, and show individual cats, we might have something like:

  • app.js
  • app.module.js
  • cat.component (directory)
    • cat.module.js
    • cat.controller.js
    • cat.component.js
  • catlist.component (directory)
    • catlist.module.js
    • catlist.controller.js
    • catlist.component.js

The cat module might look like this:

var component = require('cat.component');
var controller = require('cat.controller');
module.exports = angular.module('cat', [])
.controller('catController', controller);
.component('cat', component)
.name;

Notice how the module ultimately exports name, which will be the string cat. This means that in the app module, we can do this:

angular.module('app',[
require('./cat.component/cat.module')
]);

Exercise - Webpack

Download the starter point.

Create a file called cats.js. Put something like the following into it:

module.exports = function() { console.log('cats!'); }

Now in app.js, require cats.js

var cats = require('./cats') cats();

Build using webpack.

Now add a dog module, require it, and make it work.

Exercise - Building Angular app

In this section we are going to rebuild the Flickr app using Webpack. Break your Flickr directive down into three pieces, the module, the controller, the directive, and the service. Put them in a directory called flickr.component.

If you want true separation, you may optionally put the service in its own directory, with its own module.

Build using Webpack. Very nice.

Exercise - Build the Tests

We can also build the test using webpack. The webpack.conf file can export an array or targets.

Build the tests, then run them in a browser.

Further Reading