Webpack 101

What is WebPack

WebPack is a module bundler: it takes your dependencies as input and generates static assets as output.

WebPack can split your application into multiple JavaScript files. It's useful if you want to let users only download the code for a specific page in a single-page app. Additionally, common code base can be extracted to be downloaded only once.

WebPack's loaders allow to transform non-JavaScript resources (CSS, images) into JavaScript modules along with preprocessing e.g. SASS to CSS.

WebPack supports AMD and CommonJS module systems.

How to use WebPack

WebPack can be used as a command line tool.

webpack main.js bundle.js

Or, preferably, using its configuration file webpack.config.js

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

You can specify multiple entry points. filename uses a template construct [name] with name being substituted with keys from entry, i.e. build/Home.js and build/About.js will be generated as a result.

module.exports = {
  entry: {
    Home: './home.js',
    About: './about.js'
  },
  output: {
    path: 'build',
    filename: '[name].js'
  }
};

WebPack can also extract common code base (library, stylesheets, etc) from files being transformed and make a shared bundle.

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
  entry: {
    Home: './home.js',
    About: './about.js'
  },
  output: {
    path: 'build',
    filename: '[name].js'
  },
  plugins: [commonsPlugin]
};

Finally, there are several ways of invoking webpack:

• webpack builds the project once in development mode
• webpack -w invokes continuous, incremental build in development mode
• webpack -p builds the project for production

Check webpack -h for additional options.

How to transform CoffeeScript to JavaScript

WebPack's loaders transform non-JavaScript resources into JavaScript modules, e.g. CoffeeScript files into JavaScript.

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee' },
    ]
  }
};

How to require a resource without specifying the extension

To require a non-JavaScript resource without specifying the extension, include that extension inside resolve.extensions parameter.

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee' },
    ]
  },
  resolve: {
    extensions: ['', '.js', '.coffee']
  }
};

Now, you can require('file') instead of require('file.coffee').

How to require static assets (stylesheets and images)

WebPack allows to load CSS (using require()) as a JavaScript module. It is done using css-loader and style-loader. The former loader properly resolves url() expressions from that CSS file while the latter inserts stylesheets into the page as a <style> tag.

You can chain loaders with !.

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee' },
      { test: /\.scss$/, loader: 'style!css!sass' },
    ]
  },
  resolve: {
    extensions: ['', '.js', '.coffee']
  }
};

When you require images, webpack inlines a URL to the image into the bundle and returns it from require(). publicPath is used to generate URLs to images.

You can tell WebPack to inline images lower than 32k as Base64 while the rest will be served using direct URLs.

module.exports = {
  entry: './main.js',
  output: {
    path: './build',
    publicPath: 'http://example.com/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.scss$/, loader: 'style!css!sass' },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=32768'}
    ]
  }
};

WebPack documentation is here.