Webpack — bundling for the modern frontend

JavaScript applications are growing. Dozens of files, hundreds of dependencies, SASS compilation, minification, source maps. Grunt and Gulp are not enough. Webpack approaches the build as a dependency graph — and changes the rules of the game.

Module bundler, not task runner¶

Grunt and Gulp are task runners — you define tasks and run them sequentially. Webpack is a module bundler — it analyzes import/require dependencies and creates an optimized bundle. Loaders transform files (SASS → CSS, ES6 → ES5), plugins post-process (minification, extraction).

Configuration¶

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'bundle.[hash].js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
      { test: /\.scss$/, loader: 'style!css!sass' },
      { test: /\.(png|jpg)$/, loader: 'url?limit=8192' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin('styles.[hash].css')
  ]
};

Hot Module Replacement¶

webpack-dev-server with HMR — change your SASS and the CSS updates without a page reload. Change a React component and it re-renders without losing state. A development experience on a different level.

Code splitting¶

Webpack can split the bundle into chunks — lazy loading for routes. The user downloads only the code they need. Essential for large SPAs.

Webpack is the new standard¶

The learning curve is steeper than with Grunt/Gulp, but the result is worth it. For modern frontend with React/Angular, webpack is the de facto standard.