Webpack — Bundling für das moderne Frontend

JavaScript-Anwendungen wachsen. Dutzende Dateien, hunderte Abhängigkeiten, SASS-Kompilierung, Minifizierung, Source Maps. Grunt und Gulp reichen nicht aus. Webpack behandelt den Build als Dependency-Graph — und verändert die Spielregeln.

Module Bundler, nicht Task Runner¶

Grunt und Gulp sind Task Runner — Sie definieren Tasks und führen sie sequenziell aus. Webpack ist ein Module Bundler — es analysiert import/require-Abhängigkeiten und erstellt ein optimiertes Bundle. Loaders transformieren Dateien (SASS → CSS, ES6 → ES5), Plugins verarbeiten nach (Minifizierung, Extraktion).

Konfiguration¶

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 mit HMR — ändern Sie Ihr SASS und das CSS aktualisiert sich ohne Seitenneuladung. Ändern Sie eine React-Komponente und sie rendert neu, ohne den State zu verlieren. Eine Entwicklungserfahrung auf einem anderen Niveau.

Code Splitting¶

Webpack kann das Bundle in Chunks aufteilen — Lazy Loading für Routes. Der Nutzer lädt nur den Code, den er braucht. Essenziell für große SPAs.

Webpack ist der neue Standard¶

Die Lernkurve ist steiler als bei Grunt/Gulp, aber das Ergebnis ist es wert. Für modernes Frontend mit React/Angular ist Webpack der De-facto-Standard.