Webpack — bundling pro moderní frontend

JavaScript aplikace rostou. Desítky souborů, stovky závislostí, SASS kompilace, minifikace, source mapy. Grunt a Gulp na to nestačí. Webpack přistupuje k buildu jako k dependency grafu — a mění pravidla hry.

Module bundler, ne task runner¶

Grunt a Gulp jsou task runnery — definujete úlohy a spouštíte je sekvenčně. Webpack je module bundler — analyzuje import/require závislosti a vytvoří optimální bundle. Loaders transformují soubory (SASS → CSS, ES6 → ES5), plugins postprocessují (minifikace, extraction).

Konfigurace¶

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 s HMR — změníte SASS, CSS se aktualizuje bez reloadu stránky. Změníte React komponentu, překreslí se bez ztráty state. Development experience na jiné úrovni.

Code splitting¶

Webpack umí rozdělit bundle na chunky — lazy loading pro routes. Uživatel stáhne jen kód, který potřebuje. Zásadní pro velké SPA.

Webpack je nový standard¶

Křivka učení je strmější než u Grunt/Gulp, ale výsledek stojí za to. Pro moderní frontend s React/Angular je webpack de facto standard.