Module Bundler

Think Browserify with more

Webpack vs Browserify

Works with almost any module system

AMD, CJS, UMD, Component, Latest Hipster Module System (LHMS)

Can require in CSS, Images, Fonts etc.

Uses CJS syntax to load modules

var angular = require('angular');

angular.controller('foo', function() {



Like browserify transforms


Pre and post hooks

Even has a transform loader

Loader syntax

var _ = require('lodash');
// This will load in image as base64
// CSS is loaded in as text an then injected into head
// Multiple loaders can be chained together
// If a js file doesn't user a module system we can still
// require it in and assign it to a local variable

// foo is our reference to somelibrary

Config file

Having loaders inline not a good idea

  module: {
    loaders: [
      { test: /\.png$/, loader: 'url' },
      { test: /\.js$/, loader: 'es6-loader' }

Resolve Modules

resolve: {
  moduleDirectories: ['node_modules', 'bower_components']


resolve: {
  alias: {
    component: 'absolute/path/to/component'

// No need to jump around paths anymore
// be wary this will look in moduledirectories first
var thing = require('component');

Integrates with your favourite build system

Gulp, Grunt, Make etc

Smarter build output

Incremental builds

Watch task will only rebuild touched files


Loader syntax is ugly

  test: /\.scss$/,
  loader: [
    '?browsers=last 2 versions, > 1%, Firefox ESR, ie >= 9',

Documentation is rubbish

Webpack is awesome

Has the answer for almost any issue