Webpack

Webpack ist ein sogenannter Bundler. Das Ziel ist Ladevorgänge von Assets, CSS und JS zu optimieren. Es hat aber noch weitere Tools an Board. Minify, Uglyfy, Ein Server mit live Reloading...

Gute Einführung:

https://www.youtube.com/watch?v=WQue1AN93YU

Gehört aktuell (2021) zu den am meisten verbreiteten Bundlern und ist der quasi Standard.

Quickstart

Voraussetzungen

NodeJS, npm, webpack

Auf dem Mac am einfachsten über Homebrew node installieren und den Rest über node.

brew install node

Wichtigste Befehle

# Install dependencies (only the first time)
npm install

# Run the local server at localhost
npm run dev

# Build for production in the dist/ directory
npm run build

install wird nur einmal ausgeführt um die fehlenden Abhängigkeiten aufzulösen. Alle benötigten Komponenten werden nachgeladen. Vorsicht bei Fehlern mit veralteten libs.

npm audit fix

mit Vorsicht verwenden. Wenn alle tools die nachgeladen werden nur im Verzeichnis (lokal) und nicht global installiert werden (install -g) sind sie in der Regel kein Problem. Vorsicht wenn der Rechner von außen erreichbar ist.

npm run dev startet einen server und wird zum entwickeln genutzt. Dateien werden im src Verzeichnis bearbeitet

npm run build erstellt im Verzeichnis /dist ein fertiges Projekt, dass man zum Server hochladen kann.

Mehr nützliche Befehle als Beispiel

// Füge gsap zum Projekt hinzu (wird dann auch im HTML Head genutzt
npm install gsap
// Füge gsap in der Version xy hinzu und speichere als neue Dependency (wird dann bei install gleich hinzugefügt)
npm install --save gsap@3.5.11