Wat is Webpack en waar wordt het voor gebruikt…

Webpack is een statische module bundler voor moderne JavaScript-toepassingen. Het verwerkt de bestanden van je project (modules) en combineert ze tot één of meerdere bundels die in de browser kunnen worden gebruikt.

De belangrijkste taken en voordelen van Webpack:

Modulebouw: Combineert alle afhankelijkheden van het project (JavaScript, CSS, afbeeldingen, etc.) in geoptimaliseerde bestanden. Dit maakt een modulaire aanpak in ontwikkeling mogelijk.
Transpilatie en polyfills: Met loaders kan het moderne JavaScript (ES6+) omzetten naar oudere standaarden (ES5), die door de meeste browsers worden begrepen, en polyfills toevoegen voor het ondersteunen van nieuwe API's.
Resourcebeheer: Het kan niet alleen JavaScript verwerken, maar ook andere bestandstypen zoals CSS (via css-loader, style-loader), afbeeldingen (asset/resource), lettertypen, etc., en deze opnemen in de bundel of aparte bestanden maken.
Optimalisatie: Biedt tal van plugins voor het verkleinen van de bundelgrootte, zoals minificatie, compressie, verwijderen van onbenutste code (tree shaking).
Code splitting: Maakt het mogelijk om de bundel op te splitsen in kleinere delen die op aanvraag worden geladen, wat de initiële laadtijd van de applicatie versnelt.
Hot Module Replacement (HMR): Laat toe modules bij te werken in een draaiende applicatie zonder de hele pagina te herladen, wat het ontwikkelproces aanzienlijk versnelt.
Afhankelijkheidsbeheer: Helpt bij het efficiënt beheren van de complexe afhankelijkheidsgrafiek in het project.

Voorbeeld van een basisconfiguratie (bestand webpack.config.js):

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Ingangspunt
  output: {
    filename: 'bundle.js', // Naam van de uitvoerbundel
    path: path.resolve(__dirname, 'dist'), // Map voor uitvoerbestanden
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Pas de regel toe op bestanden met extensie .js
        exclude: /node_modules/, // Sluit de map node_modules uit
        use: {
          loader: 'babel-loader', // Gebruik babel-loader voor transpile
        },
      },
      {
        test: /\.css$/, // Pas de regel toe op bestanden met extensie .css
        use: [
          'style-loader', // Voegt CSS toe aan DOM
          'css-loader',   // Verwerkt CSS
        ],
      },
    ],
  },
  plugins: [
    // Extra plugins (bijvoorbeeld voor minificatie, kopiëren van bestanden)
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, // Schakelt compressie in
    port: 9000,     // Poort van de ontwikkelserver
  },
};

Webpack is de facto standaard geworden voor het bouwen van moderne webapplicaties, vooral bij gebruik van frameworks en bibliotheken zoals React, Vue en Angular.

Wat is Webpack en waar wordt het voor gebruikt?