All about Webpack!

What is it anyway?


					// webpack.config.js
module.exports = {
	entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

Webpack is
A Module bundler
A Task runner
A Build system

What does it have?


					if (window.location.pathname === '/feed') {
  showLoadingState();
  require.ensure([], function() { // On demand load
    hideLoadingState();
    require('./feed').show();
  });
} else if (window.location.pathname === '/profile') {
  showLoadingState();
  require.ensure([], function() {
    hideLoadingState();
    require('./profile').show(); // Code splitting
  });
}

Webpack can
Hot reload modules
Split code
Load scripts on demand

But it doesn't end there...


// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    path: './build',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    // inline base64 URLs for <=8k images, direct URLs for the rest
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }
};

Webpack is extremely
Modular
Smart

Loaders
Teach webpack what it does not know out of the box
Load all the things!
CSS, Images...

Plugins
Injects into the build process

Feature Flags
Enable or disable parts of your app using global variables and environments

Handle common code
Identify common code and load them as a separate bundle automatically

Async loading
Load scripts only when they are needed with require.ensure()

May your bundles "Live long and prosper"

/abilashk
/abi1ity