Je créais un portfolio avec Rails 6, mais je le développais parce que je ne comprenais pas le webpack, je l'ai donc posté en résumé de mon étude
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
En un mot, ** Node.js est un outil de regroupement de modules qui s'exécute côté serveur **.
Si vous exprimez l'intérieur de votre esprit lorsque vous lisez l'explication de ce pack Web,
"Node.js est-il délicieux ???" "Qu'est-ce qu'un module ..."
Calmez-vous et recherchez des mots inconnus ici! !! !! !!
** JavaScript qui s'exécute côté serveur. ** Fonctionne comme Ruby ou PHP.
JavaScript qui s'exécute du côté serveur de cette manière est appelé ** JavaScript côté serveur **, mais Node.js est un exemple typique. (Il semble qu'il y ait beaucoup d'autres choses, mais cela semble être mineur.) ** Node.js = JavaScript côté serveur ** Veuillez être conscient.
** Les fichiers tels que les fichiers JavaScript ** sont appelés modules.
À propos, webpack collecte également du CSS et des images, ils sont donc également appelés modules! !!
Résolvez les dépendances et combinez plusieurs modules en un seul.
En premier lieu, un bundle signifie un ** fichier groupé **.
C'est un JavaScript qui s'exécute côté serveur, et c'est un moyen pratique de combiner CSS, JavaScript, images, etc. dans un seul fichier! !! !! !! (Forcible)
** Vous vous demandez ici **
C'est dans le mécanisme de HTTP / 1.1, qui est un protocole de communication entre navigateurs / serveurs. HTTP / 1.1 a un nombre limité de requêtes qui peuvent être traitées en même temps. Dans une situation aussi limitée, si vous demandez des fichiers CSS, images et JS un par un, la vitesse de traitement ralentira. Par conséquent, il est possible d'augmenter la vitesse d'affichage (performances) en collectant autant que possible les requêtes JS et en réduisant le nombre de requêtes.
Maintenant que nous avons en quelque sorte compris ce qu'est le webpack, nous résumerons les avantages du webpack.
Dans le développement frontal, jQuery et Vue.js sont souvent utilisés, et webpack peut facilement utiliser ces modules externes.
S'il y a un fichier qui charge plusieurs bibliothèques etc. et le charge dans application.js qui en dépend, ce sera comme suit
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>
Si vous faites ce qui précède, vous craignez que plus vous avez de lectures, plus il sera difficile à gérer, et si vous modifiez l'ordre de lecture, cela risque de ne pas fonctionner correctement.
Si vous n'utilisiez pas webpack, vous auriez écrit des fichiers tels que js et inférieurs un par un, mais si vous les assemblez ** étroitement ** avec webpack, vous pouvez écrire avec beaucoup moins de description.
qiita.rb
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf8"/>
<title>dependencyresolved</title>
</head>
<body>
<scriptsrc="js/bundle.js"></script>
</body>
</html>
Il n'est pas nécessaire d'écrire d'autres chargements CSS ou JS, tout est résumé dans bundle.js.
webpack est un bundler de modules pour le développement front-end. Un regroupeur de modules est un outil qui rassemble plusieurs modules, et le module est un fichier JavaScript ou autre. En d'autres termes, webpack est un outil qui rassemble plusieurs fichiers JavaScript! !! !!