Webpack: inteligentní bundling pro moderní web

Webpack revolučně mění způsob, jakým organizujeme a doručujeme frontendové assety. Od modulárního bundlingu po code splitting a hot module replacement.

Proč potřebujeme bundler¶

Moderní webové aplikace se skládají z tisíců modulů — JavaScript, CSS, obrázky, fonty. HTTP/1.1 je neefektivní pro stovky malých souborů. Bundler kombinuje moduly do optimálních balíčků pro doručení prohlížeči.

Webpack jde dál než Grunt/Gulp — není to task runner, ale modul bundler s dependency grafem. Analyzuje importy a vytváří optimální výstup.

Konfigurace webpack.config.js¶

Základní webpack konfigurace:

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[hash].js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.(png|jpg)$/, loader: 'url?limit=8192' }
    ]
  }
};

Loadery transformují soubory — Babel pro JS, CSS loader pro styly, url-loader pro obrázky.

Code splitting a lazy loading¶

Webpack umožňuje rozdělit aplikaci do chunků načítaných na vyžádání:

// Dynamický import — webpack vytvoří separátní chunk
button.onclick = function() {
  require.ensure([], function(require) {
    var module = require('./heavy-module');
    module.init();
  });
};

Toto dramaticky zlepšuje initial load time — uživatel stahuje jen kód, který aktuálně potřebuje.

Hot Module Replacement¶

HMR je killer feature pro development — webpack aktualizuje moduly v běžící aplikaci bez full page reload:

• CSS změny se aplikují okamžitě
• React komponenty se aktualizují se zachováním stavu
• Výrazně rychlejší development cycle

Webpack Dev Server s HMR je dnes standard pro React a Vue.js vývoj.

Závěr: srdce moderního frontendu¶

Webpack je komplexní nástroj s učební křivkou, ale investice se vyplatí. Code splitting, tree shaking, HMR a bohatý ekosystém pluginů z něj dělají centrum moderního frontendového toolingu. Pro nové projekty je Webpack de facto standard.