Webpack ist ein Modul-Bundler für JavaScript-Anwendungen. Er nimmt viele einzelne Dateien — JavaScript, CSS, Bilder, Schriftarten — und erzeugt daraus wenige optimierte Dateien, die der Browser lädt. Entwickelt wurde Webpack 2012 von Tobias Koppers; es wurde zum Standardwerkzeug des JavaScript-Ökosystems, bevor Vite mit schnelleren Alternativen auftrat.
Wie Webpack arbeitet
Ausgehend von einem Einstiegspunkt (Entry) folgt Webpack dem Import-Graphen des Projekts. Jeder gefundene Dateityp wird von einem Loader verarbeitet. Am Ende steht ein oder mehrere Bundles (Output):
// webpack.config.js
module.exports = {
entry: "./src/index.js",
output: { filename: "bundle.js" },
module: {
rules: [
{ test: /.css$/, use: ["style-loader", "css-loader"] },
{ test: /.jsx?$/, use: "babel-loader" }
]
}
};Loader und Plugins
Loader transformieren Dateien: babel-loader übersetzt modernes JavaScript (oft in Kombination mit Babel), css-loader importiert CSS, sass-loader verarbeitet Sass. Plugins greifen weiter in den Prozess ein: HtmlWebpackPlugin erzeugt die HTML-Datei, MiniCssExtractPlugin bündelt Stylesheets in eigene Dateien.
Moderne Techniken
Webpack beherrscht Code-Splitting (Teile der Anwendung erst bei Bedarf laden), Tree Shaking (unbenutzten Code entfernen) und einen Dev-Server mit Hot Module Replacement — Änderungen erscheinen ohne Neuladen der Seite. Assets wie Bilder werden gehasht und können über einen CDN oder mit Cache-Kopfzeilen ausgeliefert werden.
Webpack im Projekt
Die Konfiguration liegt in webpack.config.js; installiert wird Webpack per npm. Der Aufruf npx webpack startet den Build, das Ergebnis geht anschließend ins Deployment. Frameworks wie React nutzen Webpack häufig hinter den Kulissen (Create React App), während neue Projekte zunehmend auf Vite setzen.
Verwandte Begriffe: Babel, React, Build, Deployment, CSS, HTML, npm und pip, CDN.