Webpack ist nicht allein im Web das einzige Bündel Tool doch ein sehr nützliches und eines der meist genutzten. Hier im Webpack Tutorial legen wir ein kleines Paket zusammen mit Plugin usw. für unser Projekt an mit Webpack. Beim erstellen wirst Du Schritt für Schritt verstehen wie es aufgebaut ist und kannst es dann leichter erweitern. In diesem Tutorial erstellen wir für eine Single Page eine Entwicklungsumgebung.
So um zu beginnen legen wir zuerst ein Projekt in einem Editor unserer Wahl an oder nutzen den Visual Studio Code Editor von Microsoft. Falls Du Node.js noch nicht installiert hast dann tue dies jetzt, da wir es benötigen.
Wenn Du Node.js installiert hast dann können wir mit der installation von Webpack beginnen.
Öffne dein Terminal (Konsole) und wechsele zum Projektpfad.
USERNAME$ cd /Users/USERNAME/Project/WebpackKonfiguration der Webpack package.json
Die package.json erstellen, dafür gebe folgendes ein in der Konsole.
Webpack$ USERNAME$ npm init -yDies erzeugt folgende Datei package.json mit folgendem Inhalt. Also eine saubere standard package.json die noch nicht Konfiguriert ist, aber Du kannst diese auch manuell erstellen und konfigurieren, Du musst nicht die Konsole nutzen.
0 { 1 "name": "Webpack", 2 "version": "1.0.0", 3 "description": ", 4 "main": "index.js", 5 "dependencies": {}, 6 "devDependencies": {}, 7 "scripts": { 8 "test": " \"Error: no test specified\" && exit 1", 9 }, 10 "keywords": [], 11 "author": ", 12 "license": "ISC" 13 } Nun geben wir folgende Zeile ein für die Konsole und bestätigen mit Enter um die Lokale Installation von Webpack zu beginnen.
Webpack$ USERNAME$ npm install webpack webpack-cli --save-devNach der Installation können wir in der package.json sehen das webpack und webpack-cli hinzugefügt wurden.
Wir hätten aber diese beiden Zeilen auch manuell in die package.json eingeben und npm install ausführen können und es hätte die selbe Auswirkung.
0 { 1 "name": "Webpack", 2 "version": "1.0.0", 3 "description": ", 4 "main": "index.js", 5 "dependencies": {}, 6 "devDependencies": { 7 "webpack": "^4.28.4", 8 "webpack-cli": "^3.2.1", 9 }, 10 "scripts": { 11 "test": " \"Error: no test specified\" && exit 1", 12 }, 13 "keywords": [], 14 "author": ", 15 "license": "ISC" 16 } Also wo Du jetzt weiß das Du alle Dev Dependencies so reinschreiben und alle hintereinander Installieren kannst die Du benötigst, das könnte dann so wie unten aussehen. Wenn Du mit dieser package.json dann npm install ausführst werden alle Dev Dependencies installiert die drinnen stehen.
0 { 1 "name": "Webpack", 2 "version": "1.0.0", 3 "description": ", 4 "private": true, 5 "main": "index.js", 6 "dependencies": {}, 7 "devDependencies": { 8 "clean-webpack-plugin": "^1.0.0", 9 "html-webpack-plugin": "^3.2.0", 10 "css-loader": "^2.1.0", 11 "less-loader": "^4.1.0", 12 "sass-loader": "^7.1.0", 13 "style-loader": "^0.23.1", 14 "ts-loader": "^5.3.3", 15 "typescript": "^3.2.2", 16 "webpack": "^4.28.4", 17 "webpack-cli": "^3.2.1", 18 "webpack-dev-server": "^3.1.14" 19 }, 20 "scripts": { 21 "watch": "webpack --watch", 22 "build": "webpack" 23 }, 24 "keywords": [], 25 "author": "Samet Tarim", 26 "license": "ISC" 27 } Hier ist unter anderem die Zeile scripts und in der haben wir die Zeile "build": "webpack" damit können wir dann mit
Webpack$ USERNAME$ npm run buildwebpack ausführen anstatt mit
Webpack$ USERNAME$ npx webpackWir können beliebig viele hinzufügen so wie Du auch sehen kannst ist watch auch vorhanden. Aber dazu gleich mehr, weil wenn Du es jetzt ausführen würdest bekommst du nur ein Fehler.
Tutorial Projekt Ordner und Dateien anlegen
Wir erstelle nun ein Ordner src/ und eine index.html und noch die JavaScript Datei index.js, diese beiden legen wir im selben Verzeichnis src/ ab.
0 <!DOCTYPE html> 1 <html> 2 3 <head> 4 5 <title>Webpack</title> 6 </head> 7 8 <body> 9 <script src="./index.js"></script> 10 </body> 11 12 </html> 0 import './style.css'; 1 2 function component() { 3 let element = document.createElement('div'); 4 let content = document.createTextNode("Hi there and greetings!"); 5 element.appendChild(content); 6 return element; 7 } 8 9 document.body.appendChild(component()); Konfigurieren der Konfigurationdatei
Wir benötigen noch die webpack.config.js, da wir sonst nichts konfigurieren können. Die Konfiguration macht Webpack so Mächtig aber es gibt auch eine andere alternative Lösung ohne Konfiguration und dieser trägt den Namen Parcel, aber dazu kommt auch noch ein Tutorial. Wir installieren jetzt erst unsere loader für CSS Loader und ein Style Loader. Nun sollte unsere package.json so aussehen wie unten.
Webpack$ USERNAME$ npm install --save-dev css-loaderWebpack$ USERNAME$ npm install --save-dev style-loader 0 { 1 "name": "Webpack", 2 "version": "1.0.0", 3 "description": ", 4 "main": "index.js", 5 "dependencies": {}, 6 "devDependencies": { 7 "css-loader": "^2.1.0", 8 "style-loader": "^0.23.1", 9 "webpack": "^4.28.4", 10 "webpack-cli": "^3.2.1", 11 }, 12 "scripts": { 13 "test": " \"Error: no test specified\" && exit 1", 14 }, 15 "keywords": [], 16 "author": ", 17 "license": "ISC" 18 } Wir ersetzen jetzt hier eine Zeile durch eine andere in scripts, damit wir unsere index.bundle.js erstellen können mit npm, die auch unser CSS beinhaltet.
0 { 1 "name": "Webpack", 2 "version": "1.0.0", 3 "description": ", 4 "main": "index.js", 5 "dependencies": {}, 6 "devDependencies": { 7 "css-loader": "^2.1.0", 8 "style-loader": "^0.23.1", 9 "webpack": "^4.28.4", 10 "webpack-cli": "^3.2.1", 11 }, 12 "scripts": { 13 "build": "webpack" 14 }, 15 "keywords": [], 16 "author": ", 17 "license": "ISC" 18 } Nun erstellen wir noch die Webpack Konfigurationsdatei, die wie folgt aussieht.
0 const path = require('path'); 1 2 module.exports = { 3 /** 4 * @see https://webpack.js.org/guides/development/ 5 */ 6 mode: 'development', 7 /** 8 * @see https://webpack.js.org/concepts/ 9 */ 10 entry: { 11 index: './src/index.js' 12 }, 13 /** 14 * @see https://webpack.js.org/concepts/output/ 15 */ 16 output: { 17 path: path.resolve(__dirname, 'dist'), 18 filename: '[, 19 }, 20 /** 21 * @see https://webpack.js.org/configuration/module/ 22 */ 23 module: { 24 rules: [ 25 { 26 test: /\.css$/, 27 use: [ 28 { loader: 'style-loader' }, 29 { loader: 'css-loader' } 30 ], 31 }, 32 ], 33 } 34 }; Du könntest nun schon beginnen und den Befehl jetzt in der Konsole eingeben, doch so würde man die index.html manuell in den dist/ Ordner schreiben bzw. kopieren müssen. Aber probier es aus und Du wirst sehen das deine index.bundle.js in einem dist/ Ordner erstellt wird, da wir es in der webpack.config.js angegeben haben. Wir erstellen weiter unten mit einem Plugin die HTML Datei dynamisch.
Webpack$ USERNAME$ npm run build$Webpack USERNAME$ npm run build
> webpack@1.0.0 build /Users/worldwantweb/Projects/Sites/VSC/Webpack
> webpack
Hash: dbab9198e0a4186a823c
Version: webpack 4.28.4
Time: 903ms
Built at: 2019-01-15 22:40:53
Asset Size Chunks Chunk Names
index.bundle.js 7.01 KiB 0 [emitted] index
Entrypoint index = index.bundle.js
[0] ./src/index.js 321 bytes {0} [built]
[1] ./src/style.css 1.07 KiB {0} [built]
[2] ./node_modules/css-loader/dist/cjs.js!./src/style.css 261 bytes {0} [built]
+ 3 hidden modulesWebpack plugins einsetzen
Wir haben unsere index.html in den src/ Ordner gepackt, wir haben eine erstellt weil wir diese kopieren und in den dist/ Ordner schreiben wollen, aber wir können auch direkt ein String mit HTML übergeben. So anstatt wir die index.html selbst in den dist Ordner schreiben, erledigen wir dies dynamisch und dafür setzen wir Plugins ein. Hier im Beispiel setzen wir das HTML Webpack Plugin ein und dafür geben wir folgendes in unsere Konsole ein.
Webpack$ USERNAME$ npm install --save-dev html-webpack-pluginHast Du das plugin installiert wurde dieser in der package.json hinzugefügt und somit können wir es jetzt nutzen. Jedoch müssen wir unsere webpack.config.js noch anpassen.
0 const path = require('path'); 1 const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 3 module.exports = { 4 mode: 'development', 5 entry: { 6 index: './src/index.js' 7 }, 8 output: { 9 path: path.resolve(__dirname, 'dist'), 10 filename: '[, 11 }, 12 module: { 13 rules: [ 14 { 15 test: /\.css$/, 16 use: [ 17 { loader: 'style-loader' }, 18 { loader: 'css-loader' } 19 ], 20 }, 21 ], 22 }, 23 /** 24 * @see https://webpack.js.org/plugins/ 25 */ 26 plugins: [ 27 /** 28 * @see https://github.com/jantimon/html-webpack-plugin 29 */ 30 new HtmlWebpackPlugin({ 31 title: 'Webpack', 32 template: './src/index.html', 33 filename: 'index.html', 34 }) 35 ] 36 }; So sieht sie dann aus und das Plugin ist auch integriert. Unsere HTML Datei können wir jetzt bearbeiten und wenn wir build ausführen werden die Änderungen mit übernommen. Ich habe die Datei jetzt mit einigen tags versehen und das script tag entfernt um diese Zeile auch Dynamisch zu erzeugen.
0 <!DOCTYPE html> 1 <html> 2 3 <head> 4 5 <title><%= htmlWebpackPlugin.options.title %></title> 6 </head> 7 8 <body> 9 <div class="wrap"> 10 <div class="block"> 11 Block 12 <div class="block__element"> 13 Element 14 </div> 15 <div class="block__element block--modifier"> 16 Modified Element 17 </div> 18 </div> 19 </div> 20 </body> 21 22 </html> So wir haben damit eine basis geschaffen, das wir unsere src alle bearbeiten können und dann so unsere Bündel jederzeit erstellen können. Wenn wir jetzt wieder unseren build Befehl ausführen dann sollte unsere index.html auch in den dist Ordner kopiert werden und auch unsere index.bundle.js mit einem script tag hinzugefügt werden in der index.html
Webpack$ USERNAME$ npm run buildWenn das alles funktioniert dann können wir nun auch ein Plugin installieren um den dist/ Ordner zu säubern bei jedem build Befehl. Clean up dist Folder, das verhindert das wir etwas mehrmals in die HTML Datei schreiben. Dann führen wir unser Befehl zum installieren aus und ergänzen unsere webpack.config.js erneut und füge das Plugin hinzu.
Webpack$ USERNAME$ npm install --save-dev clean-webpack-plugin 0 const path = require('path'); 1 const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 const CleanWebpackPlugin = require('clean-webpack-plugin'); 3 4 module.exports = { 5 mode: 'development', 6 entry: { 7 index: './src/index.js' 8 }, 9 output: { 10 path: path.resolve(__dirname, 'dist'), 11 filename: '[, 12 }, 13 module: { 14 rules: [ 15 { 16 test: /\.css$/, 17 use: [ 18 { loader: 'style-loader' }, 19 { loader: 'css-loader' } 20 ], 21 }, 22 ], 23 }, 24 plugins: [ 25 new HtmlWebpackPlugin({ 26 title: 'Webpack', 27 template: './src/index.html', 28 filename: 'index.html', 29 }), 30 new CleanWebpackPlugin(['dist']), 31 ] 32 }; Jetzt kannst Du erneut unser build Befehl ausführen und Dein dist/ Ordner wird zuerst bereinigt. Rufe nun deine index.html im Browser auf und es sollte alles da sein HTML, CSS und auch JavaScript.
Das wars dann für dieses Tutorial, ich werde auf diesem Beispiel aufbauend weitere Tutorials erstellen wo wir u.a. ein Server starten nach dem build Prozess. Wie man TypeScript integrieren kann und vielleicht auch in Kombination mit Babel. Wir werden SASS und LESS integrieren so wie die Konfigurationsdateien trennen. Oder auch andere Frameworks einbinden und noch vieles mehr.
Wir bauen diesen hier:
Webpack-HTML-CSS-SASS-JavaScript
Und hier noch einer mit TypeScript:
Webpack-HTML-CSS-SASS-JavaScript-TypeScript
Anzeige