HTML5-Tutorium: JavaScript: Hello World 04

2018-11-02T10:22:54Z

Michiga: /* Webpack */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung''':
Repositories (unterschiedliche Webpack-Varianten): [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_HelloWorld04a.git WK_HelloWorld04a.git], [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_HelloWorld04b.git WK_HelloWorld04b.git], [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_HelloWorld04c.git WK_HelloWorld04c.git]
==Anwendungsfälle (Use Cases)==
Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_03|dritten Teil des Tutoriums]]
ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

In diesem Teil des Tutoriums geht es darum, die Anwendung besser zu strukturieren, {{dh}} zu [[Modul|modularisieren]].

==Modularisierung==

Eine Anwendung, wie {{zB}} ein HTML5-Spiel, besteht aus diversen unterschiedlichen Komponenten mit ganz unterschiedlichen Aufgaben.
Bei einem HTML5-Spiel müssen die Spielfiguren, die Spielszenen, die Spiellogik, die Benutzereingaben, die Darstellung das Spiels im Browser
etc. erstellt und verwaltet werden, wobei das Erstellen und Verwalten teilweise während der Spielentwicklung und teilweise
während der Spielausführung (Runtime) erfolgt. An der Entwicklung eines Spiels sind üblicherweise mehrere oder gar viele
Entwickler gleichzeitig beteiligt. Oft müssen einzelnen Komponenten an neue Endgeräte oder Betriebssysteme angepasst werden.
Beispielsweise muss eine Tastatursteuerung durch eine Touch- oder Gestensteuerung ersetzt werden,
wenn ein Spiel so erweitert werden soll, dass es auch auf einem Smartphone oder Tablet läuft.

Das alles ist nur machbar, wenn man die Anwendung modularisiert, {{dh}} in kleine, möglichst unabhängige
Komponenten unterteilt. Ein großer Feind der Modularisierung sind globale Variablen und Funktionen.
Je mehr Dateien von unterschiedlichen Autoren erstellt werden, desto größer ist die Gefahr, dass es zu Namenskollisionen kommt.
Daher gilt der [[Multimedia-Programmierung: Best Practices#Modularisierung|Grundsatz]]: Verwende so wenig globale Größen wie möglich.

==Erstellen eines neuen Projektes==

Erstellen Sie ein neues Projekt „<code>HelloWorld04</code>“.

Kopieren Sie anschließend die Projektdateien (das heißt, den Ordner „<code>web</code>“ mit den Dateien „<code>index.html</code>“, „<code>main.css</code>“ und „<code>main.js</code>“ '''sowie die Datei <code>.gitignore</code>''') aus dem dritten Teil des Tutoriums und passen Sie den Titel in der HTML-Datei an.

Erstellen Sie für Ihr Projekt ein Git-Repository, committen Sie und pushen Sie es dann auf den Git-Server.

Dadurch, dass die Datei <code>.gitignore</code> das Verzeichnis <code>node_modules</code> enthält,
werden die Dateien, die in Zukunft in diesem Ordner gespeichert werden, '''nicht''' ins Git-Repository übertragen.
Dies ist notwendig, da sich in diesem Ordner mehrere tausend ganz kleine Dateien befinden
werden, und die Speicherung dieser Daten im Git-Repository Stunden in Anspruch nehmen kann.
Dabei ist eine Speicherung gar nicht notwendig, da sie jederzeit mit dem Befehl <code>npm install</code> '''sehr schnell''' wieder hergestellt werden können.

BTW: '''Sollten Sie einmal eine Abschlussarbeit mit Node.js erstellen, fügen Sie bitte auf gar keinen Fall den Inhalt des Ordners <code>node_modules</code> in Ihr Abgabemedium (CD, DVD, USB-Stick ...) ein.''' Ihr Betreuer wird es Ihnen danken!

==Erstellen einer Ordnerstruktur==

Grundsätzlich gilt auch bei der Programmierung: Ordnung ist das halbe Leben.

Web-Anwendungen werden sehr schnell sehr groß. Also sollte man sich eine geeignete Ordnerstruktur überlegen.
Üblicherweise legt man CSS-Dateien in einen Ordner namens „<code>css</code>“ und JavaScript-Dateien in einen Ordner namens
„<code>js</code>“ oder „<code>lib</code>“. Sollten es viele CSS- und/oder JavaScript-Dateien werden,
legt man im entsprechenden Ordner geeignete Unterordner an.

Legen Sie im Root-Verzeichnis Ihres Projektes folgende Ordner an (und beantworten Sie die Fragen, ob ein Ordner im Repository gespeichert werden soll, gegebenenfalls mit <code>Yes</code>):
* <code>src</code>: Der Inhalt dieses Ordners enthält die Ausgangsdateien, die mit Hilfe von Node.js noch transformiert und dann in den Web-Ordner kopiert werden. '''Verschieben Sie die Datei <code>web/index.html</code> in diesen Ordner.'''
* <code>src/css</code>: Hier werden die eigentlichen CSS-Dateien der Web-Anwendung gespeichert, die von der App dynamisch nachgeladen werden sollen. In diesem Ordner könnten zur weiteren Strukturierung Unterordner angelegt werden. Allerdings wird das in dieser Veranstaltung nicht notwendig sein. Es wird nur die Dateien „<code>head.css</code>“ und „<code>main.css</code>“ geben. '''Verschieben Sie die Datei <code>web/main.css</code> in diesen Ordner.'''
* <code>src/js</code>: Hierher kommt die Datei „<code>app.js</code>“, die für den Start der Web-Anwendung zuständig ist. Üblicherweise liest sie weitere JavaScript-Dateien sowie eine oder mehrere JSON-Dateien mit Initialwerten ein, initialisiert die Anwendung und startet sie dann. '''Verschieben Sie die Datei <code>web/main.js</code> in diesen Ordner.'''
* <code>web</code>: (Dieser Ordner existiert schon.) Der Inhalt dieses Ordners kommt später auf einen echten Web-Server.
* <code>web/css</code>: Hierher kopiert Node.js die erzeugten CSS-Dateien. (In den Tutorien werden dort jeweils nur eine sehr kleine CSS-Dateien liegen. Diese sorgen dafür, dass der Browser während der Initialisierung einer App kein defektes Layout präsentiert. Der größte Teil des CSS-Codes ist in der Haupt-JavaScript-Datei der App enthalten.)
* <code>web/js</code>: Hierher kopiert Node.js die erzeugten JavaScript-Dateien.

Wenn Sie jetzt die Datei <code>src/index.html</code> mittels <code>run</code> ausführen, sollte Ihre Anwendung immer noch laufen. '''WebStorm hat die Pfade in der Datei <code>index.html</code>, unter denen die Dateien <code>main.css</code> und <code>main.js</code> zu finden sind, automatisch angepasst.'''
Vergleichen Sie die <code>index.html</code>-Dateien der HelloWorld-Versionen 3 und 4.

Fremde Bibliotheken und automatisch generierte JavaScript-Dateien enthalten häufig
unsauberen Code, die Ihnen von WebStorm beim Speichern der Dateien im Repository angezeigt werden.
In einer Rückfrage sollen Sie dann bestätigen, dass Sie die „fehlerhaften“ Dateien trotzdem speichern wollen.

Damit Ihnen bei einem Commit nur Fehler in von Ihnen erstellten Dateien angezeigt werden, schließen Sie den Ordner „<code>web</code>“ von der WebStorm-Fehlerüberwachung aus:

* Rechtsklick auf den Ordner „<code>web</code>“ → <code>Mark Directory as</code> → <code>Excluded</code>

Für den Ordner „<code>node_modules</code>“ brauchen Sie dies nicht zu machen. Dieser Ordner wird von WebStorm-Fehlerüberwachung automatisch ignoriert.

Sie sollten nach jeden größeren Entwicklungsschritt die Änderungen im Repository speichern:

* Klick auf das Commit-Icon.

Hin und wieder ist auch ein <code>git push</code> angebracht. '''Es schadet übrigens nicht, vorher noch einmal zu überprüfen, ob die Anwendung immer noch läuft.'''

==Die App==

===Laden der CSS- und der JavaScript-Dateien===

Eine Web-Anwendung funktioniert nur – wie Sie bereits erfahren haben –, wenn nicht nur die HTML-Datei, sondern auch die zugehörigen
CSS- und JavaScript-Dateien geladen werden. Allerdings gibt es dabei ein Problem: Die CSS- und JavaScript-Dateien werden im Laufe der
Zeit immer zahlreicher und/oder größer. Diese Dateien zu laden, dauert seine Zeit.

In der dritten Version der Web-Anwendung stehen die Verweise auf diese Dateien im <code>head</code>-Bereich des Dokuments.
Dieser wird vollständig geladen, bevor der <code>body</code>-Bereich eingelesen wird. (Genauer gesagt, nur die CSS-Datei wird vollständig geladen. Durch die Angabe von <code>async="async"</code> im
Script-Tag wird erreicht, dass diese Datei geladen wird, während der Body-Bereich gerendert wird.)

Das heißt aber, dass der Browser keine Inhalte des HTML-Dokuments
darstellen kann, solange er CSS-Datei (und evtl. weitere Dateien) lädt. Wenn dies zu lange dauert,
verliert der Besucher die Geduld und verlässt die Seite vorzeitig.

Besser wäre es daher andersherum vorzugehen: Es wird zuerst der Body-Bereich geladen und dann die JavaScript- und die CSS-Dateien.
Im Falle von JavaScript ist das durchaus sinnvoll (und durch die Angabe von <code>async="async"</code> auch machbar), aber im Falle von CSS hat das den Effekt, dass der Browser noch keine Layout-Vorgaben erhalten hat,
wenn er mit dem [[Rendern]] der Seite beginnt. Also verwendet er die browserspezifischen Defaultwerte. Das heißt, die Seite sieht zunächst
ganz anders aus, als vom Designer geplant. Wenn dann die CSS-Dateien geladen wurden, wird die Seite erneut gerendert und verändert ihr Aussehen.
Auch das ist verwirrend und wirkt unprofessionell.

Was also machen?

===CSS-Dateien===
Damit das Problem mit dem falschen Layout nicht auftritt, empfiehlt Google, ganz wenige, wichtige CSS-Befehle direkt – {{dh}} als CSS-Befehle innerhalb eines <code>style</code>-Elements – in dem HTML-Head-Bereich einzufügen. Alle anderen CSS-Anweisungen sollen erst am Ende der HTML-Datei dynamisch mittels JavaScript
(oder mittels des PageSpeed-Optimization-Modul von Google) gelesen werden.<ref>{{Quelle|Google (Web)}}, Kapitel „CSS-Bereitstellung optimieren“, https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery</ref> (Früher hat Google ernsthaft empfohlen, das Link-Element ganz ans Ende der HTML-Datei zu stellen, also '''nach''' dem schließenden <code>html</code>-Tag. Das wäre aber natürlich nicht standardkonform.)

Gehen Sie so vor, wie es Google empfiehlt. Genauer gesagt, gehen Sie so vor,
wie es unter [[Multimedia-Programmierung: Best Practices#CSS|Multimedia-Programmierung: Best Practices]] beschrieben ist. In diesem und den folgenden Tutorien werden
die dort beschriebenen Prinzipien berücksichtigt.

Legen Sie die Datei <code>src/css/head.css</code> an und fügen Sie folgenden (sehr kurzen!) Code ein:

<source lang="javascript">
html, body
{ background-color: #C5EFFC; }

.hidden
{ display: none; }
</source>

In der Datei <code>src/css/main.css</code> können Sie das <code>.hidden</code>-Element und
das Farbattribut <code>background-color: #C5EFFC;</code> entfernen.

In der Datei <code>src/index.html</code> müssen Sie das Link-Element in Header folgendermaßen
<source lang="html">
<link rel = "stylesheet" type = "text/css" href = "css/head.css"/>
</source>
anpassen. Das heißt, Sie laden im HTML-Head-Bereich nur noch die kleine CSS-Datei.
Damit funktioniert Ihre Web-Anwendung derzeit nur noch rudimentär: Es gibt kaum noch CSS-Anweisungen,
die berücksichtigt werden.

===JavaScript-Dateien===

Für JavaScript-Dateien empfiehlt Google ebenfalls, diese nicht schon zu Beginn zu laden.<ref>{{Quelle|Google (Web)}}, Kapitel „Remove Render-Blocking JavaScript“, https://developers.google.com/speed/docs/insights/BlockingJS</ref> Dieser Vorschlag war bis vor kurzem noch sehr sinnvoll. Man könnte das
Skript-Element aus dem HTML-Header-Bereich entfernen und vor dem schließenden Body-Tag einfügen.
Bis vor Kurzem war diese Vorgehensweise auch sehr weit verbreitet.
Seitdem die meisten Browser die Async- und Defer-Attribute im Skript-Element unterstützen, ist dies
jedoch nicht mehr notwendig. Und Sie haben ja schon ein Async-Attribut in Ihr Skript-Element eingefügt.

Was Sie aber machen sollten, ist, in das erste Section-Tag im Body der HRML-Datei das Attribut
<code>class="hidden"</code> einzufügen, damit man auch dieses Element beim Laden der Anwendung
zunächst nicht sieht. In einer Anwendung, die zum Laden etwas länger dauert, würde man
einen so genannten [[Splash Screen]] sichtbar einfügen und diesen beim eigentlichen Start der App ausblenden.

Wenn Sie nun die Web-App testweise starten, sollten Sie eine himmelblaue, aber ansonsten leere Seite sehen.

Fügen Sie nun den Befehl
<source lang="javascript">
document.getElementById('section_form').classList.remove('hidden');
</source>
als letzen Befehl in den Rumpf der Funktion <code>init</code> in der Datei
<code>src/js/main.js</code> ein.

Wenn Sie jetzt die Web-App starten, sollte sie wieder funktionieren (wenn auch mit einem sehr CSS-armen Layout).

Was haben Sie erreicht? Solange die Anwendung geladen wird, sehen Sie nur einen blauen Hintergrund ohne Inhalt. (Besser wäre – wie gesagt – ein Splash Screen.) Wenn dann alles, {{dh}} alle CSS- und JavaScript-Dateien geladen wurden, wird die eigentliche Anwendung sichtbar. Dies ist bei großen Anwendungen,
wie einem Spiel, eine übliche Vorgehensweise.

Vergessen Sie nicht:
* Klick auf das Commit-Icon.

===Modularisierung der JavaScript-Dateien===

Die JavaScript-Datei <code>main.js</code> aus dem dritten Teil des Tutoriums wird in zwei Teile aufgespalten:
<code>greet.js</code> und <code>main.js</code>. Die erste Datei enthält die eigentliche Begrüßungsfunktionalität,
die zweite initialisiert die App, {{dh}} aktiviert die Begrüßungsfunktion.

Erstellen Sie die JavaScript-Datei <code>src/js/greet.js</code> und verschieben Sie die
beiden Funktionen <code>sayHello</code> und <code>sayHelloOnEnter</code>
(jeweils samt Funktionsrumpf :-) ) in diese Datei.

Schreiben Sie vor jede der beiden Funktionsdefinitionen das Schlüsselwort <code>export</code>.
Mit dieser ES-6-Anweisung legen Sie fest, dass die beiden Funktionen von anderen
ES-6-Dateien mittels eines Import-Befehls importiert werden können. (Funktionen ohne
Export-Anweisung könnten von anderen ES-6-Dateien nicht importiert werden.)

In der Datei <code>src/js/main.js</code> werden jetzt diese beiden Funktionen importiert.
Fügen Sie ganz am Anfang der Datei ({{dh}} vor der verbliebenen Init-Funktion)
die folgende Import-Anweisung ein:

<source lang="javascript">
import * as greet from './greet.js';
</source>

Damit wird erreicht, dass alle (<code>*</code>) Elemente, die von der Datei <code>greet.js</code>
exportiert werden, unter ihrem jeweiligen Namen im Objekt <code>greet</code> gespeichert werden.
(Man könnte auch nur bestimmte Elemente von <code>greet.js</code> importieren, sofern man nicht alle benötigt.) Das heißt, innerhalb der Datei <code>main.js</code> gibt es nun die beiden Funktionen
<code>greet.sayHello</code> und <code>greet.sayHelloOnEnter</code>.

Damit die Web-Anwendung wieder funktioniert. müssen Sie also in der Datei <code>main.js</code> vor jede Verwendung dieser beiden Funktionen die Zeichfolge <code>greet.</code> einfügen. (WebStorm zeigt ihnen durch Unterringeln an, dass die Funktionen <code>sayHello</code> und <code>sayHelloOnEnter</code> nicht existieren. Wenn Sie jeweils <code>greet.</code> davor einfügen, verschwinden die Fehlermarkierungen.)

Fügen Sie jetzt noch das Attribut <code>type="module"</code> in das Script-Element in der
Datei <code>src/index.html</code> ein '''und löschen Sie gegebenenfalls das Attribut <code>type="text/javascript"</code>'''.
Damit sollte Ihre Anwendung wieder funktionieren.
Leider macht Ihnen WebStorm einen Strich durch die Rechnung. Aus „Sicherheitsgründen“
unterbindet WebStorm das dynamische Laden der Datei <code>greet.js</code> durch den Browser.
Sie werden durch ein Pop-up-Fenster aufgefordert, eine “authorization URL” zum Clipboard zu
kopieren. Wenn Sie das tun, ist es schon zu spät. Der Browser konnte die Datei nicht laden
und daher funktioniert die Web-App nicht (wenn Sie sie von WebStorm aus starten;
auf einem anderen Server würde sie schon funktionieren, wenn Sie alles richtig gemacht haben).

Gewöhnen Sie WebStorm dieses Verhalten ab:

* <code>File</code> → <code>Settings</code>/<code>Preferences</code> → <code>Build, Execution, Deployment</code> → <code>Debugger</code>
* Häkchen bei <code>Allow unsignen requests</code>
* <code>OK</code>

Jetzt sollte die Anwendung wieder laufen (auch wenn Sie sie von WebStorm aus starten).

Vergessen Sie nicht:
* Klick auf das Commit-Icon.

===Node.js und Webpack===

Jetzt müssen sie „nur noch“ die CSS-Datei <code>main.css</code> laden, dann funktioniert Ihre
Anwendung wieder wie gewohnt. Und Sie ist überdies modular aufgebaut. (Sehr viel weiter kann man
eine Hello-World-Anwendung nicht modularisieren. :-) )

Google empfiehlt, die eigentliche CSS-Datei dynamisch zu laden. Dazu gibt es zahreiche Möglichkeiten.
Ich empfehle derzeit Webpack dafür einzusetzen<ref>Webpack: https://webpack.js.org/</ref>.

Webpack ist ein sehr mächtiges Werkzeug,
mit dem eine Vielzahl von Web-Dateien in einer oder einigen wenigen JavaScript-Dateien
zusammengefasst und bei Bedarf auch komprimiert werden können.
Es handelt sich um einen ''JavaScript module bundler'', der sehr viel mehr kann,
als nur CSS-Dateien dymanisch einzulesen.

Einer der Entwickler von Webpack ist [[Johannes Ewald]], ein ehemaliger Student der [[HSA]] (vgl. https://github.com/jhnns). Er bietet auch
regelmäßig Vorlesung an der HSA zum Thema „JavaScript“ an.

====Node.js-Pakete====

Öffnen Sie das WebStorm-Terminal und installieren Sie die benötigten Node.js-Pakete
(falss Sie nicht mehr genau wissen, wie man Node.js bedient, sollten Sie sich noch einmal
das Tutorium [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js]] ansehen):

<source lang="bash">
npm init -y
# Name, Description, Repository, Autor, Lizenz und Keywords in package.json anpassen
# Achtung: Der Name darf nur Kleinbuchstaben, Zahlen
# und das Underscore-Zeichen enthalten.
npm install --save-dev webpack webpack-cli
npm install --save-dev html-loader css-loader style-loader
npm install --save-dev file-loader extract-loader
npm install --save-dev suppress-chunks-webpack-plugin
</source>

Führen Sie nun einen Git-Commit durch. Sorgen Sie dafür, dass auch die neu angelegten
Dateien <code>package.json</code> und <code>package-lock.json</code> im Git-Repository
gespeichert werden. Dies können Sie entweder beim Commit erzielen, indem Sie vor
<code>Unversioned Files</code> ein Häkchen setzen oder indem Sie vor dem Commit
für beiden Dateien Folgendes ausführen:

Rechtsklick auf den Dateinamen → <code>Git</code> → <code>Add</code>

Achtung, wenn Git Ihnen anbietet, den Ordner <code>node_modules</code> zu speichern,
haben Sie die Datei <code>.gitignore</code> vergessen. Fügen Sie in diesem Fall unbedingt
die Datei [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/.gitignore .gitignore] in Ihr Projekt ein!

====Webpack====

Nun muss noch Webpack konfiguriert werden, damit die Dateien <code>web/index.html</code>, <code>web/css/head.css</code>
und <code>web/js/mains.js</code> automatisch generiert werden können.

Erstellen Sie im Wurzelverzeichnis des Projektes die Datei <code>webpack.config.js</code>
(die Sie unbedingt auch in Git speichern sollten). Fügen Sie folgenden Code in diese Datei ein.

''<code>webpack.config.js</code>''
<source lang="html">
const
path = require('path'),
SuppressChunksPlugin = require('suppress-chunks-webpack-plugin').default;

function absolutePath(l_path)
{ return path.resolve(__dirname, l_path); }

module.exports =
{ entry:
{ index: absolutePath('src/index.html'),
head: absolutePath('src/css/head.css'),
main: absolutePath('src/js/main.js'),
},

output:
{ filename: 'js/[name].js',
path: absolutePath('web'),
},

plugins:
[ new SuppressChunksPlugin(['index', 'head']) ],

module:
{ rules:
[ { test: /head\.css$/,
use: [ { loader: 'file-loader',
options: { name: '[name].[ext]',
outputPath: 'css/'
}
},
'extract-loader',
'css-loader'
]
},

{ test: /main\.css$/,
exclude: [/node_modules/, /web/],
use: [ 'style-loader',
'css-loader'
]
},

{ test: /\.html$/,
use: [ { loader: 'file-loader',
options: { name: '[name].[ext]',
outputPath: '/'
}
},
'extract-loader',
'html-loader'
]
},
]
}
};
</source>

Es handelt sich um ein JavaScript-Datei, die direkt von Node.js interpretiert wird.
Aus diesem Grund wird auch nicht das EcmaScript-6-Modul-Konzept eingesetzt, sondern
[[CommonJS]], das Standard-Modulkonzept vom Node. Hier werden Module mittels <code>require</code>
und nicht mittels <code>import</code> importiert. Für Sie ist das allerdings nebensächlich,
da Sie im Rahmen der Tutorien keine komplexen Konfigurationsdateien für Webpack implementieren werden.

Im Prinzip macht diese Datei nichts andere als ein Objekt zu exportieren,
das Webpack-Konfigurationsinformationen enthält:

* <code>entry</code>: JavaScript-Dateien, die gebündelt und komprimiert werden sollen. Man muss jeweils nur die Wurzeldatei angeben. Webpack sucht in dieser Datei rekursiv nach Import-Befehlen und packt die benötigten Dateien ebenfalls in die Ausgabedatei.
* <code>output</code>: Hier wird festgelegt, wie die gepackten Dateien heißen sollen. Für jeden Eintrag im Attribute <code>entry</code> wird eine Datei mit dem Namen <code>web/js/[name].js</code> erzeugt, wobei <code>[name]</code> durch den Schlüsselname des Entry-Eintrags ersetzt wird. In der obigen Datei gibt es drei Entry-Elemente.
* <code>plugins</code>: Hier werden Webpack-Hilfsmodule geladen, die bestimmte Zusatzaufgaben erledigen. Sie verwenden derzeit nur das Modul <code>SuppressChunksPlugin</code>. Dieses löscht die Dateien <code>web/js/index.js</code> und <code>web/js/head.js</code>, nachdem die Dateien <code>web/js/index.html</code> und <code>web/js/head.css</code> daraus mittels gewissen Loadern extrahiert wurden. Grundsätzlich generiert Webpack für jeden Entry eine JavaScript-Datei, egal, um welches Inputformat es sich handelt. Wenn man einen anderen Dateityp benötigt, muss man diese aus der zugehörigen JavaScript-Datei extrahieren und kann letztere danach mittels <code>SuppressChunksPlugin</code> löschen.
* <code>module</code>: In diesem Attribut werden Regeln (<code>rules</code>) angegeben,die festlegen, auf welche Weise eine Datei transformiert werden sollen. Bei jeder Regel gibt es einen Test, der festlegt, für welche Dateien die jeweilige Regel zutrifft. Mit Hilfe eines [[regulärer Ausdruck|regulären Ausdrucks]] wird im Tutoriumsbeispiel geprüft, ob die aktuelle Datei auf <code>head.css</code>, <code>mains.css</code> oder <code>.html</code> endet. Je nach der Endung werden anderer Loader zum Laden und Verarbeiten der zugehörigen Datei verwendet. (Für Webpack gibt es diverse Loader, einige davon haben Sie zuvor mit Hilfe von <code>npm</code> installiert.) Leider gibt es soviel Loader, dass die Auswahl geeineter Loader nicht gerade einfach ist. Erschwerden kommt hinzu, dass sich mit jeder neuen Hauptversion von Webpack nicht nur die Struktur der Konfigurationsdatei, sonder auch die verfügbaren Loader und Plugins verändern. :-( )

CSS-Dateien werden zunächst mit dem CSS-Loader geladen und verarbeitet. Anschließend wird die Datei
<code>main.css</code> vom Style-Loader Anweisungen in die Datei <code>main.js</code> geschrieben.
Damit wird erreicht, dass die Datei <code>main.css</code> in der Datei <code>main.js</code>
enthalten ist. Sobald <code>main.js</code> geladen wird, „injiziert“ sie
die CSS-Elemente dieser JavaScript-Datei direkt in den HTML-Head-Bereich
der zugehörigen HTML-Datei. Das heißt, die CSS-Datei wird dynamisch von <code>main.js</code>
geladen. Genau das wollten wir erreichen.

Die Datei <code>head.css</code> soll nicht dynamisch geladen werden. Sie wird daher mit Hilfe
des Extract- und des File-Loaders aus der zugehörigen JavaScript-Datei extrahiert und unter
dem Namen <code>web/css/head.css</code> gespeichert.

Analog wird die Datei <code>src/index.html</code> mittels eines HTML-Loaders in eine JavaScript-Datei
geladen und von dort mit dem Extract-Loader extrahiert. Mittels des File-Loaders wird sie schließlich unter
dem Namen <code>web/index.html</code> gespeichert.

Dieses Vorgehen klingt zunächst einmal so, als ob man mit Kanonen auf Spatzen schießen würde.
Warum kopiert man beispielsweise die Dateien nicht einfach direkt vom Ordner <code>src</code>
in den Ordner <code>web</code>. Ganz eingach: Die Loader können noch viel mehr, als eine Datei nur
zu kopieren. Sie können Dateien, die von diesen referenziert werden, in die referenzierende Datei integrieren. Zum Beispiel wird
die Datei <code>greet.js</code> automatisch in die Datei <code>main.js</code> eingefügt, so dass
index.html nur eine einzige JavaScript-Datei laden muss und nicht zwei. (Bei großen Projekten
werden so Dutzende von Dateien in eine einzige gepackt.) Außerdem kann man mit
speziellen Anweisungen Webpack dazu bringen, die erzeugten JavaScript-/HTML-/CSS-Dateien
zu komprimieren, so dass das Datenvolumen teils drastisch reduziert wird.

Damit steht einer Verwendung von Webpack nichts mehr im Wege. Man könnte Webpack nun direkt von
der Kommandozeile aufrufen. Besser ist es allerdings NPM-Skript-Befehle
zu verwenden.

====NPM-Skripte====

Fügen Sie das <code>scripts</code>-Objekt der Datei <code>package.json</code>
drei weitere Skript-Anweisungen ein:

<source lang="json">
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"prod": "webpack --mode production",
"watch": "webpack --mode development --watch"
}
</source>

Geben Sie nun im WebStorm-Terminal die Anweisung <code>npm run dev</code> (dev = development) ein.

Wenn Sie alles richtig gemacht haben, müsste Webpack fehlerfrei durchlaufen und die Dateien
<code>web/index.html</code>, <code>web/js/main.js</code> sowie <code>web/css/main.css</code> erstellen. Im Zweifelsfall müssen Sie auf das Reload-Icon unter der Menü-Leiste klicken, um sie zu sehen (<code>View</code> → Häkchen bei <code>Toolbar</code>).
Wenn die Dateiname nicht grün, sondern braun eingefärbt sind, müssen Sie sie (spätestens beim Commit) unter Git-Kontrolle stellen.

Wenn Sie jetzt die Datei <code>index.html</code> im Browser öffnen, sollten Sie nach kurzer Zeit
wieder das Begrüßungsmenü sehen. Nach Eingabe des Namens und Klick auf den Say-hello-Button
oder Drücken der Enter-Taste sollten Sie freundlich begrüßt werden.

Allerdings ist das CSS-Layout immer noch mangelhaft. Die Datei <code>main.css</code>
wird bislang noch nicht eingebunden. Das können Sie ganz einfach ändern.
Fügen Sie in die Datei <code>src/js/main.js</code> folgenden Import-Befehl am Anfang der Datei ein:

<source lang="javascript"</code>
import '../css/main.css';
</source>

Dieser Befehl ist in JavaScript eigentlich nicht erlaubt. Wenn Sie jetzt versuchen, die Datei
<code>src/js/main.js</code> im Browser zu öffnen, werden Sie in der Browser-Konsole
eine Fehlermeldung erhalten.

Webpack unterstützt allerdings das Importieren von CSS-Dateien in JavaScript-Dateien.
Das Tool wurde so konfiguriert, dass die
Datei so eingebunden wird, dass sie dynamisch in das HTML-Dokument injiziert wird
(siehe oben).

Geben Sie im WebStorm-Terminal noch einmal die Anweisung <code>npm run dev</code> ein
und öffenen Sie die Datei <code>web/js/main.js</code> im Browser (nicht die Datei <code>src/js/main.js</code>!). Jetzt sollte sie wieder sauber formatiert sein
(evtl. erst nach einem Reload im Browser)!

Sehen Sie sich mal den Inhalt der Datei <code>main.js</code> an. Darin finden Sie
– neben vielen Kommentaren, die zur Strukturierung der Datei verwendet werden – die Inhalte der Dateien <code>main.js</code>, <code>greet.js</code> und <code>main.css</code>
sowie spezielle Anweisungen, die von Webpack eingefügt wurden.

In dieser Form ist die Datei für Entwicklungszwecke einigermaßen brauchbar. Bei einem Fehler
zeigt einem der Browser, in welcher Zeile dieser Datei der Fehler aufgetreten ist.
Normalerweise handelt es sich um eine Zeile, die Sie erfasst haben. Webpack-Befehle sollten keine
Fehler werfen. Nachteilig ist, dass diese Zeile etwas anders aussehen kann, wie in Ihrem Sourcecode,
da sie eventuell transformiert wurde. Aber man findet die Originalzeile normalerweise recht schnell.

Gehen Sie nochmal ins WebStorm-Terminal und geben Sie diesmal
die Anweisung <code>npm run prod</code> (prod = production) ein.
Es werden wieder die drei Dateien erstellt. Und die Web-Anwendung sollte
immer noch funktionieren. Wenn Sie sich die gebündelte JavaScript-Datei <code>web/js/main.js</code> noch einmal ansehen,
werden Sie feststellen, dass sie nun viel kleiner ist. Sie enthält keine überflüssige Leerzeichen, keine Zeilenumbrüche
und auch keine Kommentare mehr (evtl. mit Ausnahme des Kommentars, der Auskunft über den Autor und die
Lizenz gibt). Diese Datei ist für den Produktivbetrieb viel besser geeignet, da sie weniger Bandbreite
verbraucht. Insbesondere Smartphone-Besitzer freuen sich über kleine Dateien, da ihr Datenvolumen
dadurch weniger belastet wird. Für die Fehlersuche bei der Entwicklung der Web-App ist diese
Variante allerdings vollkommen ungeeignet.

Nun können Sie noch die Anweisung <code>npm run watch</code> testen.
Dieser startet einen Webpack-Watcher, der bei jeder Änderung an einer Datei, die von Webpack
beim Bündeln berücksichtigt wird, dafür sorgt, dass die Dateien im Web-Ordner neu erstellt werden
und Sie die Ergebnisse Ihrer Änderung durch einen einfachen Reload der Datei <code>index.html</code>
im Browser betrachten können. Ändern Sie doch einmal in der CSS-Datei <code>src/css/main.css</code>
('''nicht in der Datei <code>web/css/main.css</code>''') die Hintergrundfarbe, speichern Sie die Datei und
laden Sie danach die HTML-Datei im Browser mittels des Reload-Buttons neu.

Vergessen Sie nicht:
* Klick auf das Commit-Icon und anschließend <code>git push</code>.

===Webpack improved===

Bislang wird im Produktivmodus nur die JavaScript-Datei komprimiert. Schöner wäre es, wenn auch die CSS-Datei und die HTML-Datei komprimiert werden würden.
Und wenn man die Google-Vorgaben vollständig umsetzen möchte, sollte außerdem der komprimierte Inhalt der Datei <code>head.css</code> direkt in die
Datei <code>index.html</code> eingefügt werden. All das kann man mit Webpack erreichen.

Installieren Sie dazu folgende Node.js-Pakete:

<source lang="bash">
# Die folgenden Pakete wurden schon installiert.
# Das brauchen Sie nicht zu wiederholen.
# Es macht aber auch nichts, wenn Sie sie noch einmal installieren.
npm install --save-dev webpack webpack-cli
npm install --save-dev html-loader css-loader style-loader
npm install --save-dev file-loader extract-loader
npm install --save-dev suppress-chunks-webpack-plugin

# Die folgenden Pakete werden zusätzlich benötigt:
npm install --save-dev cssnano postcss-loader
npm install --save-dev posthtml-loader posthtml-inline-assets
npm install --save-dev html-webpack-plugin terser-webpack-plugin
npm install --save-dev
</source>

Nun müssen Sie „nur noch“ den Inhalt der Datei <code>webpack.config.js</code> ersetzen.
(In dieser Datei steckt stundelange Arbeit, da die Webpack-Dokumentation häufig nicht so prikelnd ist
und es Dutzende von Paketen gibt, die Ähnliches leisten, aber oft die ein oder andere Schwäche haben.
Ich behaupte übrigens nicht, dass dies die perfekte Konfigurationsdatei ist, um die gewünschten Optimierungen zu erzielen.
Aber sie funktioniert! Zumindest solange webpack5 nicht veröffentlicht wurde. )

<source lang="javascript">
const
path = require('path'),
TerserPlugin = require('terser-webpack-plugin'),
SuppressChunksPlugin = require('suppress-chunks-webpack-plugin').default;

function absolutePath(l_path)
{ return path.resolve(__dirname, l_path); }

module.exports = function(p_env, p_argv)
{ let isProd = p_argv.mode === 'production';
// isProd === true iff Webpack is run in production mode

return {
// store the current mode ('production', 'development')
// in the Webpack object so that webpack plugins can access it
mode: p_argv.mode,

// https://webpack.js.org/configuration/devtool/
// 'eval-source-map' than 'inline-source-map' would be better.
// However, using this devtool forces a developer using WebStorm
// to authorize an error url created by webpack within WebStorm
// before it can be viewed within the browser.
devtool: isProd ? false : 'inline-source-map',

entry:
{ // use the following files to create
// web/index.html, web/css/head.css, web/js/main.js
html: absolutePath('src/index.html'),
head: absolutePath('src/css/head.css'),
main: absolutePath('src/js/main.js'),
},

output:
{ // placesJavaScript files in dictionary web/js
filename: 'js/[name].js',
path: absolutePath('web'),
},

plugins:
[ // delete html.js, head.js from output dictionary web/js
// (For every member of the entry list, a JavaScript file
// is created. index.html and head.css are extracted from
// those files. So html.js and head.js are not needed
// any longer.)
new SuppressChunksPlugin(['html', 'head'])
],

optimization:
{ minimizer:
[ // minimizes ES6 JavaScript files
// remove all JS comments but those that are marked to be preserved
new TerserPlugin({ terserOptions: {output: {comments: /@preserve/}}})
]
},

module:
{ rules:
[ { test: /head\.css$/,
use: [ // store the extracted CSS content in a file
{ loader: 'file-loader',
options: { name: '[name].[ext]',
outputPath: 'css/'
}
},
// extract the CSS content from the file loaded
'extract-loader',
// load the CSS file (using the optimizer defined below)
{ loader: 'css-loader', options: { importLoaders: 1 } },
// optimize the CSS file
{ loader: 'postcss-loader',
options: { sourceMap: 'inline',
plugins:
() =>
[ require('cssnano')
({ preset:
[ 'default',
{ discardComments:
// remove all CSS comments but those
// that are marked tpo be preserved
{ remove: c => !c.match(/@preserve/) }
}
],
})
]
}
}
]
},

{ test: /main\.css$/,
exclude: [/node_modules/, /web/],
use: [ // enable to import CSS files into a JavaScript file
'style-loader',
// load the CSS file (using the optimizer defined below)
{ loader: 'css-loader', options: { importLoaders: 1 } },
// optimize the CSS file
{ loader: 'postcss-loader',
options: { sourceMap: 'inline',
plugins: [ require('cssnano') ]
// all CSS comments are removed
}
}
]
},

{ test: /\.html$/,
use: [ // store the extracted HTML content in a file
{ loader: 'file-loader',
options: { name: '[name].[ext]',
outputPath: '/'
}
},
// extract the HTML content from the file loaded
'extract-loader',
// load the HTML file; if on production mode minimize it
{ loader: 'html-loader',
options: { minimize: isProd,
removeComments: true,
ignoreCustomComments: [/@preserve/],
//https://gist.github.com/stalniy/d55fc7990b4340c9d0ef55fd8838ed34
collapseWhitespace: true,
conservativeCollapse: false,
collapseInlineTagWhitespace: false,
removeAttributeQuotes: false,
caseSensitive: true,
}
},
{ loader: 'posthtml-loader',
options:
{ plugins:
[ require('posthtml-inline-assets')
({ from: 'web/css', // 'web/web', 'web/abc' works as well ...
// this doesn't make any sense ...
inline: { script: false }
})
],
}
}
]
},
]
}
}};
</source>

Testen Sie den Übersetzungsmechanismus. Führen Sie <code>npm run dev</code> aus und sehen
Sie sich die erzeugten Dateien an (insbesondere den Head-Bereich der Datei <code>web/index.html</code>).
Führen Sie danach <code>npm run prod</code> aus und sehen Sie sich die Dateien noch einmal an.

Führen Sie die erzeugte Datei <code>web/index.html</code> jedesmal auch im Browser aus und
überprüfen Sie, ob sie noch funktioniert.

Übrigens: Webpack wurde so konfiguriert, dass HTML-, CSS- und JavaScript-Kommentare, in denen das Schlüsselwort <code>@preserve</code> enthalten ist,
auch in den komprimierten Code eingefügt werden. Das ist wichtig, wenn man Lizenzinformationen in diese Dateien einfügen möchte.
==Quellen==
<references/>
<ol>
<li value="7"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

GlossarWiki - Benutzerbeiträge [de-formal]

HTML5-Tutorium: JavaScript: Hello World 04