Ich habe mit Rails 6 ein Portfolio erstellt, es aber entwickelt, weil ich das Webpack nicht verstehen konnte. Deshalb habe ich es als Zusammenfassung meiner Studie veröffentlicht
https://qiita.com/kamykn/items/45fb4690ace32216ca25 https://eng-entrance.com/what-is-nodejs https://note.com/billion_dollars/n/n596fecfdeb2e https://qiita.com/ashketcham/items/48d64e960d436f8b6f78
Kurz gesagt, ** Node.js ist ein Modulbündler-Tool, das auf der Serverseite ausgeführt wird **.
Wenn Sie beim Lesen der Erklärung dieses Webpacks das Innere Ihres Geistes zum Ausdruck bringen,
"Ist Node.js lecker ???" "Was ist ein Modul ..."
Beruhige dich und schau hier nach unbekannten Wörtern! !! !! !!
** JavaScript, das auf der Serverseite ausgeführt wird. ** Funktioniert wie Ruby oder PHP.
JavaScript, das auf diese Weise auf der Serverseite ausgeführt wird, heißt ** serverseitiges JavaScript **, aber Node.js ist ein typisches Beispiel. (Es scheint, dass es viele andere Dinge gibt, aber es scheint eine Kleinigkeit zu sein.) ** Node.js = Serverseitiges JavaScript ** Bitte beachten Sie.
** Dateien wie JavaScript-Dateien ** werden als Module bezeichnet.
Webpack sammelt übrigens auch CSS und Bilder, daher werden sie auch Module genannt! !!
Lösen Sie Abhängigkeiten auf und kombinieren Sie mehrere Module zu einem.
In erster Linie bedeutet ein Bundle eine ** gruppierte Datei **.
Es ist ein JavaScript, das auf der Serverseite ausgeführt wird, und es ist eine bequeme Möglichkeit, CSS, JavaScript, Bilder usw. in einer Datei zu kombinieren! !! !! !! (Gewaltsam)
** Du wunderst dich hier **
Es befindet sich im Mechanismus von HTTP / 1.1, einem Kommunikationsprotokoll zwischen Browsern / Servern. HTTP / 1.1 verfügt über eine begrenzte Anzahl von Anforderungen, die gleichzeitig verarbeitet werden können. Wenn Sie in einer solchen begrenzten Situation nacheinander CSS, Bilder und JS-Dateien anfordern, verlangsamt sich die Verarbeitungsgeschwindigkeit. Daher ist es möglich, die Anzeigegeschwindigkeit (Leistung) zu erhöhen, indem JS-Anforderungen so weit wie möglich erfasst und die Anzahl der Anforderungen verringert werden.
Nachdem wir irgendwie verstanden haben, was Webpack ist, werden wir die Vorteile von Webpack zusammenfassen.
Bei der Front-End-Entwicklung werden häufig jQuery, Vue.js usw. verwendet, und das Webpack erleichtert die Verwendung solcher externer Module.
Wenn es eine Datei gibt, die mehrere Bibliotheken usw. lädt und diese in application.js lädt, ist dies wie folgt
qiita.rb
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf8"/>
<title>dependency</title>
</head>
<body>
<scriptsrc="js/extra.js"></script>
<scriptsrc="js/jquery.js"></script>
<scriptsrc="js/mymodule.js"></script>
<scriptsrc="js/main.js"></script>
<scriptsrc="js/application.js"></script>
</body>
</html>
Wenn Sie die oben genannten Schritte ausführen, besteht die Sorge, dass die Verwaltung umso schwieriger ist, je mehr Lesevorgänge Sie haben. Wenn Sie die Lesereihenfolge ändern, funktioniert sie möglicherweise nicht ordnungsgemäß.
Wenn Sie kein Webpack verwendet hätten, hätten Sie Dateien wie js und darunter einzeln geschrieben. Wenn Sie sie jedoch mit Webpack ** eng ** zusammenfügen, können Sie mit erheblich weniger Beschreibung schreiben.
qiita.rb
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf8"/>
<title>dependencyresolved</title>
</head>
<body>
<scriptsrc="js/bundle.js"></script>
</body>
</html>
Es ist nicht erforderlich, andere CSS- oder JS-Ladevorgänge zu schreiben. Alles ist in bundle.js zusammengefasst.
webpack ist ein Modulbündler für die Front-End-Entwicklung. Ein Modulbündler ist ein Tool, das mehrere Module zusammensetzt, und das Modul ist eine JavaScript-Datei oder dergleichen. Mit anderen Worten, Webpack ist ein Tool, das mehrere JavaScript-Dateien zusammenstellt! !! !!