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

npm install
npm run dev
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 /div ein fertiges Projekt, dass man zum Server hochladen kann.