Webpack
Links[Bearbeiten]
https://www.valentinog.com/blog/webpack/ - schöner Kurzüberblick zu Webpack 5
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[Bearbeiten]
Voraussetzungen[Bearbeiten]
NodeJS, npm, webpack
Installation[Bearbeiten]
Node installieren falls noch nicht vorhanden. Auf dem Mac am einfachsten über Homebrew. NPM sollte dann ebenfalls funktionieren.
brew install node
Der Rest geht über npm
Ein Webpack Projekt from Scratch starten[Bearbeiten]
Frisches npm Projekt mit package.json Datei (-y) anlegen
npm init -y
Webpack und Webpack CLI installieren (i oder install) und als Dependency (-D) hinzufügen
npm i -D webpack webpack-cli
Webpack liegt jetzt in den node-modules. In den meisten Konfigurationen möchte man mit npm run dev und npm run build Entweder lokal am Projekt arbeiten oder eine Distribution erstellen. Daher erstmal in package.json Unter "scripts":
"scripts": {
"build": "webpack --config ./bundler/webpack.prod.js",
"dev": "webpack serve --config ./bundler/webpack.dev.js"
},
Mit npm run build wird also webpack aufgerufen und ein Konfigurationsskript übergeben. Bei npm run dev wird außerdem noch der Webpack Server gestartet. Standardmäßig sucht Webpack alle Quelldateien des Projekts im Ordner
/src
Von sich aus macht Webpack leider noch fast nichts. Es gibt aber für alle Zwecke Module.
https://www.valentinog.com/blog/webpack/
Wichtigste Befehle in einem Webpack Projekt[Bearbeiten]
Die Befehle hängen von der Konfiguration ab was mit run ausgeführt wird findest du in der package.json
# 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[Bearbeiten]
// 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
Webpack Bundle erstellen[Bearbeiten]
https://www.valentinog.com/blog/webpack/
// Todo
Wo finde ich was?[Bearbeiten]
- Welche tools werden ausgeführt, wo kann ich minimizing, Loaders etc. einstellen
