HTML5-Tutorium: JavaScript: Hello World 05 (Webpack) - Versionsgeschichte

Kowa am 1. März 2023 um 12:49 Uhr

2023-03-01T12:49:00Z

← Nächstältere Version		Version vom 1. März 2023, 12:49 Uhr
Zeile 12:		Zeile 12:
	Im Tutorium wird „Webpack 5“ verwendet.		Im Tutorium wird „Webpack 5“ verwendet.

	==Erstellen eines neuen ~~Projektes~~==		==Erstellen eines neuen Projekts==

	Erstellen Sie ein neues Projekt <code>HelloWorld05</code> als Fork von <code>HelloWorld04</code> (siehe [[HTML5-Tutorium: JavaScript: Hello World 02\|Hello-World-02-Tutorium]]).		Erstellen Sie ein neues Projekt <code>HelloWorld05</code> als Fork von <code>HelloWorld04</code> (siehe [[HTML5-Tutorium: JavaScript: Hello World 02\|Hello-World-02-Tutorium]]).
Zeile 97:		Zeile 97:
	Benennen sie zunächst den Ordner <code>web</code> ins <code>src</code> um. Im Ordner <code>src</code> erstellen Sie künftig neue Dateien, nehmen Änderungen vor etc. Dabei sollten Sie unbedingt darauf, dass sinnvolle Module angelegt werden, viele sinnvolle Kommentare vorhanden sind, die Blöcke mittels Leerzeichen sauber eingerückt sind etc. <strong>Verwenden Sie niemals Tab-Zeichen zum Einrücken, da jeder Text-Editor Tab-Zeichen anders einrückt</strong>.		Benennen sie zunächst den Ordner <code>web</code> ins <code>src</code> um. Im Ordner <code>src</code> erstellen Sie künftig neue Dateien, nehmen Änderungen vor etc. Dabei sollten Sie unbedingt darauf, dass sinnvolle Module angelegt werden, viele sinnvolle Kommentare vorhanden sind, die Blöcke mittels Leerzeichen sauber eingerückt sind etc. <strong>Verwenden Sie niemals Tab-Zeichen zum Einrücken, da jeder Text-Editor Tab-Zeichen anders einrückt</strong>.

	Der Inhalt des Ordners <code>web</code>, der vom Browser dargestellt wird, soll künftig mittels Webpack generiert werden. Erstellen Sie dazu im Wurzelverzeichnis des ~~Projektes~~ die Datei <code>webpack.config.js</code>		Der Inhalt des Ordners <code>web</code>, der vom Browser dargestellt wird, soll künftig mittels Webpack generiert werden. Erstellen Sie dazu im Wurzelverzeichnis des Projekts die Datei <code>webpack.config.js</code>
	(die Sie unbedingt auch in Git speichern sollten). Fügen Sie folgenden Code in diese Datei ein.		(die Sie unbedingt auch in Git speichern sollten). Fügen Sie folgenden Code in diese Datei ein.

Kowa: Kowa verschob die Seite HTML5-Tutorium: JavaScript: Hello World 05 nach HTML5-Tutorium: JavaScript: Hello World 05 (Webpack)

2023-02-28T12:28:15Z

Kowa verschob die Seite HTML5-Tutorium: JavaScript: Hello World 05 nach HTML5-Tutorium: JavaScript: Hello World 05 (Webpack)

← Nächstältere Version	Version vom 28. Februar 2023, 12:28 Uhr
(kein Unterschied)

Kowa am 7. April 2022 um 06:43 Uhr

2022-04-07T06:43:36Z

← Nächstältere Version		Version vom 7. April 2022, 06:43 Uhr
Zeile 158:		Zeile 158:

	Es handelt sich um eine JavaScript-Datei, die direkt von Node.js interpretiert wird.		Es handelt sich um eine JavaScript-Datei, die direkt von Node.js interpretiert wird.
	Aus diesem Grund wird auch nicht das ~~EcmaScript~~-6-Modul-Konzept eingesetzt, sondern		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>		[[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,		und nicht mittels <code>import</code> importiert. Für Sie ist das allerdings nebensächlich,

Kowa am 14. April 2021 um 11:35 Uhr

2021-04-14T11:35:03Z

← Nächstältere Version		Version vom 14. April 2021, 11:35 Uhr
Zeile 19:		Zeile 19:

	Um Module einer Web-Anwendung für die Auslieferung zum Client zu komprimieren, zu bündeln und anderweitig zu optimieren, gibt es zahlreiche Werkzeuge. Für [[Node.js]] gibt es die sogenannten “JavaScript Module Bundlers”, wie {{zB}} [[Webpack]]<ref name="webpack"/>,		Um Module einer Web-Anwendung für die Auslieferung zum Client zu komprimieren, zu bündeln und anderweitig zu optimieren, gibt es zahlreiche Werkzeuge. Für [[Node.js]] gibt es die sogenannten “JavaScript Module Bundlers”, wie {{zB}} [[Webpack]]<ref name="webpack"/>,
	[[Browserify]]<ref>[https://browserify.org/ Browserify-Homepage]</ref> oder [[~~FuesBox~~]]<ref>[https://fuse-box.org/ FuseBox-Homepage]</ref>.		[[Browserify]]<ref>[https://browserify.org/ Browserify-Homepage]</ref> oder [[FuseBox]]<ref>[https://fuse-box.org/ FuseBox-Homepage]</ref>.

	Üblicherweise optimieren die Bundlers nicht nur JavaScript-Dateien, sondern auch HTML-, CSS-, JSON- und andere Dateien.		Üblicherweise optimieren die Bundlers nicht nur JavaScript-Dateien, sondern auch HTML-, CSS-, JSON- und andere Dateien.

Kowa: /* Quellen */

2021-04-12T14:13:54Z

Quellen

← Nächstältere Version		Version vom 12. April 2021, 14:13 Uhr
Zeile 610:		Zeile 610:
	<references/>		<references/>
	<ol>		<ol>
	<li value="2"> {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}</li>		<li value="6"> {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}</li>
	</ol>		</ol>
	<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>		<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

Kowa: /* Weiteres Optimierungspotenzial */

2021-04-12T10:01:40Z

Weiteres Optimierungspotenzial

← Nächstältere Version		Version vom 12. April 2021, 10:01 Uhr
Zeile 601:		Zeile 601:
	Das Transfervolumen kann weiter reduziert werden, indem die Dateien vor dem Ausliefern vom Server mittels [[gzip]] weiter komprimiert werden. Der Client muss sie dann erst wieder entpacken, bevor er sie verarbeiten kann.		Das Transfervolumen kann weiter reduziert werden, indem die Dateien vor dem Ausliefern vom Server mittels [[gzip]] weiter komprimiert werden. Der Client muss sie dann erst wieder entpacken, bevor er sie verarbeiten kann.
	Dies ist aber eine Server-Optimierung, die nicht mit Webpack oder einen vergleichbaren Tool realisiert werden kann.		Dies ist aber eine Server-Optimierung, die nicht mit Webpack oder einen vergleichbaren Tool realisiert werden kann.


	==Fortsetzung des Tutoriums==		==Fortsetzung des Tutoriums==

Kowa am 12. April 2021 um 10:01 Uhr

2021-04-12T10:01:26Z

← Nächstältere Version		Version vom 12. April 2021, 10:01 Uhr
Zeile 582:		Zeile 582:

	=== Weiteres Optimierungspotenzial ===		=== Weiteres Optimierungspotenzial ===

			Google PageSpeed Insights [https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2021%2Fhello_world%2FWK_HelloWorld05d%2Fweb%2Findex.html Version 5d] ist immer noch nicht ganz zufrieden.

			Zum einen sollten die Anzahl der Dateien (zwei) und die Dateigrößen weiter reduziert werden, was aber schwierig ist.
			Man könnte eine Datei <code>budget.json</code> definieren, die Google mitteilt, welche Dateianzahl und welche Dateigrößen man
			für akzeptabel hält. Dan erhält man erst ab diesen Werten eine Warnung.

			Zum anderen teilt einen Google das größte Element in der HTML-Seite mit. Hier gibt es tatsächlich noch Optimierungspotenzial, gerade bei
			Single-Page-Anwendungen. Eine Single-Page wird in der Regel auf einmal geladen, aber nur portionsweise angezeigt. Wichtig ist eigentlich nur, dass
			der Inhalt „above the fold“ („über dem Zeitungsknick“) in der HTML-Seite enthalten ist. Das ist der Bereich, den der Benutzer nach dem Laden der Seite
			ohne Scrollen sieht. Bei der Hello-World-Anwendung wäre das die Section mit der ID <code>section_form</code>. Alle übrigen Bestandteile
			der HTML-Seite könnten dynamisch nachgeladen werden, sobald sie benötigt werden. Genauso funktioniert Google Maps: Es werden nur die Kacheln der Erdoberfläche in der Auflösung geladen, die momentan benötigt werden. Um Verzögerungen, die durch das Nachladen entstehen, gerin zu halten, werden
			Randkacheln und Kacheln in benachbarter Auflösung schon mal im Voraus geladen, während der Benutzer die aktuellen Karte betrachtet. Es ist natürlich
			nicht sichergestellt, dass die Kacheln tatsächlich irgendwann angezeigt werden müssen. Aber es ist wahrscheinlich. Und daher wird der potenziell
			unnötige Datenverkehr in Kauf genommen. Hier kommt es auf die Abwägung zwischen User Experience (möglichst kurze Wartezeiten)
			und Energie- und Kosteneffizienz (möglichst geringes Transfervolumen) an.

			Das Transfervolumen kann weiter reduziert werden, indem die Dateien vor dem Ausliefern vom Server mittels [[gzip]] weiter komprimiert werden. Der Client muss sie dann erst wieder entpacken, bevor er sie verarbeiten kann.
			Dies ist aber eine Server-Optimierung, die nicht mit Webpack oder einen vergleichbaren Tool realisiert werden kann.


	==Fortsetzung des Tutoriums==		==Fortsetzung des Tutoriums==

Kowa: /* Verwendung des SCSS-Minimizers */

2021-04-12T09:37:03Z

Verwendung des SCSS-Minimizers

← Nächstältere Version		Version vom 12. April 2021, 09:37 Uhr
Zeile 580:		Zeile 580:
	Dieser Loader übersetzt SCCS- und SASS-Anweisungen in CSS-Anweisungen. Er bietet zusätzlich eine Option <code>outputStyle</code> an,		Dieser Loader übersetzt SCCS- und SASS-Anweisungen in CSS-Anweisungen. Er bietet zusätzlich eine Option <code>outputStyle</code> an,
	die festlegt, ob die CSS-Anweisungen komprimiert werden sollen oder nicht. Dies nutzen wir aus, um die CSS-Anweisungen im Produktionsmodus zu komprimieren.		die festlegt, ob die CSS-Anweisungen komprimiert werden sollen oder nicht. Dies nutzen wir aus, um die CSS-Anweisungen im Produktionsmodus zu komprimieren.

			=== Weiteres Optimierungspotenzial ===

	==Fortsetzung des Tutoriums==		==Fortsetzung des Tutoriums==

Kowa: /* Verwendung des SCSS-Minimizers */

2021-04-12T09:36:12Z

Verwendung des SCSS-Minimizers

@@ Zeile 528: / Zeile 528: @@
 '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2021/hello_world/WK_HelloWorld05d/web/index.html <code>index.html</code> (5d)]
 (Git-Repository: [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_HelloWorld05b.git 5d])
 ==Fortsetzung des Tutoriums==

Kowa: /* Ein kleine Verbesserung der Import-Anweisungen */

2021-04-12T08:52:31Z

Ein kleine Verbesserung der Import-Anweisungen

← Nächstältere Version		Version vom 12. April 2021, 08:52 Uhr
Zeile 515:		Zeile 515:
	</source>		</source>

	Damit ~~erreich~~ Sie, dass ~~Sie~~ Dateien, die sich in den Ordnern <code>src/json/</code>, <code>src/css/</code>, <code>src/img/</code> befinden		Damit erreichen Sie, dass Dateien, die sich in den Ordnern <code>src/json/</code>, <code>src/css/</code>, <code>src/img/</code> befinden,
	direkt ~~importieren~~ können. Die Notwendigkeit, relative Pfadangaben wie <code>import '../../../css/irgenwas.css';</code> zu verwenden, entfällt.		direkt importiert werden können. Die Notwendigkeit, relative Pfadangaben wie <code>import '../../../css/irgenwas.css';</code> zu verwenden, entfällt.
	Sie können künftig einfach <code>import '/css/irgenwas.css';</code> schreiben. Das gilt auch für Bilder oder JSON-Dateien, die Sie		Sie können künftig einfach <code>import '/css/irgenwas.css';</code> schreiben. Das gilt auch für Bilder oder JSON-Dateien, die Sie
	(mittels des erweiterten Import-Befehls von Webpack) in eine JavaScript-Datei ~~improtieren~~.		(mittels des erweiterten Import-Befehls von Webpack) in eine JavaScript-Datei importieren. Sie können selbstverständlich beliebig
			viele weitere Alias-Befehle definieren, natürlich auch für JavaScript-Bibliotheken, die in anderen Ordnern enthalten sind.

	Ersetzen Sie also in der Datei <code>src/main.js</code>, den Befehl <code>import '../css/body.css';</code> durch		Ersetzen Sie also in der Datei <code>src/main.js</code>, den Befehl <code>import '../css/body.css';</code> durch