Webpack

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() {

});

Loaders

Like browserify transforms

Think

• CSS preprocessors
• ES6 Module Transpilers
• Convert assets to base64

Pre and post hooks

Even has a transform loader

Loader syntax

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

// foo is our reference to somelibrary
foo.say();

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']
}

Avoid
../../../../component.js

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

• Can segment build into even chunks
• Force large files to load on demand
• Segment based on routes
• Can extract common modules

Incremental builds

Watch task will only rebuild touched files

Warts

Loader syntax is ugly

{
  test: /\.scss$/,
  loader: [
    'css',
    '!autoprefixer-loader',
    '?browsers=last 2 versions, > 1%, Firefox ESR, ie >= 9',
    '!sass-loader?includePaths[]=src/styles/components/'
  ].join('')
}

Documentation is rubbish

Webpack is awesome

Has the answer for almost any issue

Thanks

• webpack.github.io
• ryanseddon.github.io/webpack-talk