Webpack Tutorial mit Beispiel Projekten

Letzte Aktualisierung : |  

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/Webpack

Konfiguration der Webpack package.json

Die package.json erstellen, dafür gebe folgendes ein in der Konsole.

Webpack$ USERNAME$ npm init -y

Dies 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.


// JSON CODE
     0  {  1      "name": "Webpack",  2      "version": "1.0.0",  3      "description": ",  4      "main": "index.js",  5      "dependencies": {},  6      "devDependencies": {},  7      "scripts": {  8          "test": "echo \"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-dev

    Nach 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.


    // JSON CODE
       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": "echo \"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.


      // JSON CODE
         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 build

        webpack ausführen anstatt mit

        Webpack$ USERNAME$ npx webpack

        Wir 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.


        // HTML CODE
           0  <!DOCTYPE html>  1  <html>  2    3  <head>  4      <meta charset="UTF-8">  5      <title>Webpack</title>  6  </head>  7    8  <body>  9      <script src="./index.js"></script>  10  </body>  11    12  </html> 

          // JS CODE
             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-loader
            Webpack$ USERNAME$ npm install --save-dev style-loader
            // JSON CODE
               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": "echo \"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.


              // JSON CODE
                 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.


                // JS CODE
                   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: '[name].bundle.js',  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
                  // OUTPUT CODE
                  $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 modules


                  Webpack 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-plugin

                  Hast 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.


                  // JS CODE
                     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: '[name].bundle.js',  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.


                    // HTML CODE
                       0  <!DOCTYPE html>  1  <html>  2    3  <head>  4      <meta charset="UTF-8">  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 build

                      Wenn 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
                      // JS CODE
                         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: '[name].bundle.js',  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

                        Dein Kommentar

                        * Diese Felder sind erforderlich, E-Mails werden nicht veröffentlicht
                        Du kannst diese Tags verwenden: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>
                        ?

                        Dieses Feld ist optional
                        Fülle dieses Feld aus und verbinde Dein Namen mit Deiner Website.

                        Die in dieses Kontaktformular eingegebenen Daten werden in unserem System gespeichert, um die Ausgabe des Kommentars sicherzustellen. Ihre E-Mail-Adresse wird gespeichert, um die Anzahl der Kommentare und die zukünftige Registrierung zu bestimmen

                        Ich habe gelesen die Datenschutzbestimmungen und Nutzungsbedingungen. Ich bestätige die Übermittlung des Formulars und die Übermittlung meiner Daten.
                        tnado © 2019 | Alle Rechte Vorbehalten
                        In cooperation with Hyperly