Eigenes Setup für Webpack
Für meinen MyInnovationDay habe ich mir vorgenommen, ein erstes eigenes Setup für Webpack zu erstellen und das zugrundeliegende System zu verstehen. Webpack ist im Grunde genommen ein Tool, um Javascript-Module zu bündeln, hat sich seit seiner Veröffentlichung jedoch zu einem mächtigen Build-System entwickelt. Es ist vor allem für große Projekte vorgesehen.
Im Gegensatz zu Task Runnern wie Gulp, versucht Webpack, HTML, CSS, Javascript und Assets nicht isoliert zu betrachten und zu verarbeiten. Stattdessen werden alle Filetypen als Dependencies betrachtet und auch so behandelt. Ziel ist es, alle Abhängigkeiten in kleine Pakete zu teilen, die nur bei Bedarf geladen werden. So kann die Modularität von Projekten und als Konsequenz daraus die Performance und Wartbarkeit einer Seite erhöht werden.
Ein erstes, simples Webpack-Setup ist schnell umgesetzt. Im Root-Verzeichnis des Projekts wird ein webpack.config.js-File angelegt. Im context-Folder sucht Webpack nach den entry-Files und liest deren Inhalt ein. Jede „import“- oder „require()“-Dependency und deren Kind-Dependencies werden in einem Baum abgebildet, und am Schluss wird nur gebündelt, was wirklich gebraucht wird. Das Ergebnis landet gebündelt im festgelegten Output-Pfad. Webpack besitzt hierbei optional die Fähigkeit, mehrfach verwendete Module in einen separaten Output zu bündeln. Dieser Output könnte dann clientseitig gecached werden, um Redundanzen zu vermeiden und die Performance zu verbessern.
CSS Module mit Webpack
Als konkretes Anwendungsbeispiel für Webpack habe ich mich auf das Thema CSS-Module fokussiert. Das Ziel von CSS-Modulen ist es, Styles für eine Komponente an einem Ort zu konzentrieren und diese ausschließlich auf die spezifische Komponente anzuwenden.
Dadurch bleibt das CSS übersichtlich und funktioniert mit niedriger Spezifizität, ohne ungewollt von anderen Styles überschrieben zu werden. Am Ende erleichtert das den Entwicklungsprozess und verringert die Wahrscheinlichkeit später erforderlicher Bugfixes. Auch die Anwendung des BEM-Konzepts beim Erstellen von Styles würde damit überflüssig werden.
Fazit
Nachdem mir der Einstieg in Webpack recht schnell gelungen ist, gerieten meine Versuche zum Thema CSS-Module dann zunächst etwas ins Stocken, da es hierzu einige verschiedene Ansätze gibt (die dann auch ganz schnell in den Bereich “React” abzielen), aber eher Dokumentation. So wurde etwas mehr Zeit und Hirnschmalz erforderlich, um meine ursprüngliche Idee so wie geplant umzusetzen. Letztendlich habe ich aber einiges gelernt und konnte einige gute Ansätze herausarbeiten, auf deren Basis ich meine Forschungen demnächst vertiefen möchte.
