Webpack

Kursbeschreibung ​

Webpack ist der Standard im modernen Frontend-Build-Workflow. In diesem Kurs lernst du Schritt für Schritt, wie du mit Webpack JavaScript, CSS, Bilder und andere Assets effizient bündeln und optimieren kannst. Du erfährst, wie du Loaders und Plugins einsetzt, um SCSS zu kompilieren, HTML-Dateien automatisch zu verlinken, Cache-Busting zu aktivieren und mehrere Entry-Points zu verwalten. Ausserdem lernst du, wie du den Development- und Production-Modus trennst, den DevServer nutzt und wiederkehrende HTML-Elemente mit Includes pflegst.
Am Ende bist du in der Lage, eine vollständige Webpack-Konfiguration für deine eigenen Projekte aufzubauen.

Zielgruppe ​

Für Entwickler:innen, die bereits mit JavaScript und CSS arbeiten und ihre Projekte mit einem modernen Build-Prozess strukturieren und optimieren wollen.

Lernziele ​

Nach diesem Kurs kannst du:

• Webpack installieren und Grundkonfigurationen erstellen.
• JavaScript, CSS/SCSS und Assets bündeln.
• Loaders und Plugins gezielt einsetzen.
• Cache-Busting implementieren.
• HTML automatisch generieren und mit Assets verknüpfen.
• Development- und Production-Builds aufsetzen.
• Den Webpack DevServer für Live-Reload nutzen.
• Mehrere Entry-Points und HTML-Includes verwalten.

Kursinhalte (Stichworte) ​

• Einführung & Installation
  • NPM initialisieren, Webpack & CLI installieren.
• Grundkonfiguration
  • Entry, Output, Mode (Development/Production).
• Loaders
  • SCSS, CSS, HTML, Asset Modules.
• Plugins
  • HTMLWebpackPlugin, CleanWebpackPlugin, MiniCssExtractPlugin.
• Optimierungen
  • Cache-Busting, getrennte CSS-Dateien, Asset-Struktur.
• Multi Entrypoints
  • Konfiguration für mehrere HTML/JS-Dateien.
• Includes
  • Wiederverwendbare HTML-Partials einbinden.
• Webpack DevServer
  • Live-Reload, Watch-Funktion.
• Praxis
  • Komplettes Setup für ein eigenes Projekt.

Vorkenntnisse / Anforderungen ​

• Grundkenntnisse in HTML, CSS und JavaScript.
• Basiswissen in Node.js und NPM ist von Vorteil.
• Eigenen Laptop (Windows, macOS oder Linux) mit installiertem Node.js.

Methodik ​

Kurze Theorieeinheiten, gefolgt von praktischen Übungen am eigenen Laptop. Die Teilnehmer setzen die einzelnen Schritte direkt in einem Beispielprojekt um.

Besonderheiten ​

• Praxisorientiert: Du baust eine vollständige Webpack-Umgebung auf.
• Direkt anwendbar: Für eigene Projekte sofort nutzbar.
• Modern: Fokus auf Webpack 5 und aktuelle Best Practices.