Webpack

A long time ago...

When developers still used the <blink> tag...

(probably not that long ago)

There were two JavaScript module systems...

AMD (Asynchronous Module Definition) for the front-end:

define(['underscore', 'jquery'], function(_, $) {
    var add = function(a, b) {
        return a + b;
    };
    return {
        add: add
    };
});

and CommonJS for the back-end (i.e. Node.js):

var _ = require('underscore');
var $ = require('jquery');

var add = function(a, b) {
    return a + b;
};

module.exports = {
    add: add
};

Then someone came along and said:

"Let's deprecate <blink>"

And everyone was sad.

Then someone else came along and said:

"Why don't we use CommonJS for the front-end?"

The townspeople were outraged: "A synchronous module system, for the front-end? Do you hate puppies as well?"

Nonetheless, projects such as Browserify evolved, which allowed front-end code to be developed with CommonJS, and then bundled into a single JavaScript file for use in the browser, thus avoiding the problem with synchronous modules.

Developers frantically tried to wire Browserify into their workflows, using Gulp, Grunt, even Broccoli and Brunch, resulting in massive build configs and highly-coupled tasks.

After decades (months) of war and turmoil (lots of JS libraries all doing the same thing), the rebel alliance (developers) began to converge on one module bundling system when someone at Facebook said they liked it better...

Welcome to Webpack

Not only does webpack recognize and bundle both AMD and CommonJS...

AMD + CommonJS = One JS Bundle

... it also bundles other static assets (such as CSS and images), automatically resolves dependencies from your node_modules, ...

+=


                            img.llamas { height: 200px; width: auto; display: inline-block; margin-bottom: -90px; }

+

+ underscore, jquery, etc.

(Yeah, I used negative margin. Deal with it.)

... and includes support for multiple bundles, uglification, and so much more - by default.

But just when the rebel alliance thought it was safe, the Galactic Empire (ECMA International) released their new battle ship, the Codebase Destroyer (ECMASript version 6), with one particularly massive change...

One module system to rule them all: ES2015 modules.

import _ from 'underscore';
import $ from 'jquery';

export const add = (a, b) => a + b;

Can the rebel alliance survive?

Is browserify webpack's father?

Will the W3C bring back <blink>?
(Spoiler: they won't)

Come to

Front End Club

on Thursday, December 21st at 2pm to find out!