Webpack: Unterschied zwischen den Versionen
Steff (Diskussion | Beiträge) |
|||
| Zeile 1: | Zeile 1: | ||
| + | == Links == | ||
| + | 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... | 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... | ||
| Zeile 6: | Zeile 8: | ||
Gehört aktuell (2021) zu den am meisten verbreiteten Bundlern und ist der quasi Standard. | Gehört aktuell (2021) zu den am meisten verbreiteten Bundlern und ist der quasi Standard. | ||
| − | + | == Quickstart == | |
| − | + | === Voraussetzungen === | |
[[NodeJS]], [[npm]], webpack | [[NodeJS]], [[npm]], webpack | ||
| − | Auf dem Mac am einfachsten über [[Homebrew Paketmanager für Mac OS X|Homebrew]] | + | === Installation === |
| + | Node installieren falls noch nicht vorhanden. Auf dem Mac am einfachsten über [[Homebrew Paketmanager für Mac OS X|Homebrew]]. NPM sollte dann ebenfalls funktionieren. | ||
brew install node | brew install node | ||
| + | Der Rest geht über npm | ||
| − | ==== Wichtigste Befehle ==== | + | === Ein Webpack Projekt from Scratch starten === |
| + | 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": | ||
| + | <pre> | ||
| + | "scripts": { | ||
| + | "build": "webpack --config ./bundler/webpack.prod.js", | ||
| + | "dev": "webpack serve --config ./bundler/webpack.dev.js" | ||
| + | }, | ||
| + | </pre> | ||
| + | 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 ==== | ||
| + | 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) | # Install dependencies (only the first time) | ||
npm install | npm install | ||
| Zeile 37: | Zeile 60: | ||
==== Webpack Bundle erstellen ==== | ==== Webpack Bundle erstellen ==== | ||
| + | https://www.valentinog.com/blog/webpack/ | ||
| + | // Todo | ||
| + | ==== Wo finde ich was? ==== | ||
| + | * Welche tools werden ausgeführt, wo kann ich minimizing, Loaders etc. einstellen | ||
Aktuelle Version vom 30. Dezember 2021, 17:17 Uhr
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
