Qu'est-ce que le webpack

Webpack est un regroupeur de modules pour les plus grandes applications Web d'une seule page qui peuvent être regroupées avec un exécuteur de tâches distinct capable de gérer JavaScript, CSS, etc. webpack est un excellent ajout à l'ensemble d'outils d'un développeur front-end. Avec webpack, le développement Web est plus rapide, plus efficace et plus amusant.

Qu'est-ce qu'un bundler de modules ?

Dans la plupart des langages de programmation, nous pouvons diviser le code en plusieurs fichiers et importer ces fichiers dans l'application pour utiliser les fonctionnalités qu'elle contient. Ceci n'est pas intégré au navigateur, donc la création de bundles de modules fournira cette fonctionnalité sous diverses formes : en chargeant les modules de manière asynchrone et en les exécutant après le chargement ou en combinant tous les fichiers requis dans un seul fichier JavaScript, chargé via la balise en HTML.

Sans chargeurs de modules ni bundlers, nous pourrions toujours combiner manuellement des fichiers ou charger du HTML dans d'innombrables balises , mais cela présente plusieurs inconvénients :

1. Nous devons garder une trace de l'ordre correct dans lequel les fichiers doivent être chargés, y compris quels fichiers dépendent de quels autres fichiers, et nous assurer de ne pas inclure de fichiers dont nous n'avons pas besoin.

2. Plusieurs balises signifient plusieurs appels au serveur pour charger tout le code, ce qui nuit aux performances.

3. Nécessite beaucoup de travail manuel au lieu de laisser l'ordinateur le faire à votre place.

Pourquoi choisir Webpack ?

Choisissez Webpack pour les raisons suivantes :

1 Il est relativement nouveau car il peut résoudre ou éviter les lacunes et les problèmes apparus chez ses prédécesseurs.

2. La mise en route est très simple. Si nous voulons simplement regrouper un tas de fichiers JavaScript sans autres fonctionnalités, nous n'avons même pas besoin d'un fichier de configuration.

3. Son système de plug-in lui permet d'en faire plus, ce qui le rend très puissant. C'est donc probablement le seul outil de construction dont nous avons besoin.

Processus d'exécution du Webpack

Webpack commence à fonctionner à partir des entrées, il s'agit généralement du module JavaScript où le webpack démarre son processus de traversée. Au cours de ce processus, webpack évalue les correspondances d'entrée par rapport aux configurations du chargeur, qui indiquent à webpack comment transformer chaque correspondance.

Processus d'analyse

L'entrée elle-même est un module. Lorsque webpack rencontre une entrée, webpack tente de faire correspondre l'entrée au système de fichiers à l'aide de la configuration de résolution de l'entrée. En plus de node_modules, nous pouvons également demander à webpack d'effectuer des recherches dans des répertoires spécifiques. Il est également possible d'ajuster la manière dont Webpack correspond aux extensions de fichiers, et des alias spécifiques peuvent être définis pour les répertoires. Le chapitre Épuisement et conditionnement couvre ces idées plus en détail.

Si l'analyse échoue, webpack générera une erreur d'exécution. Si webpack parvient à analyser le fichier correctement, webpack effectuera le traitement sur le fichier correspondant selon la définition du chargeur. Chaque chargeur applique des transformations spécifiques au contenu du module.

La manière dont le chargeur correspond aux fichiers analysés peut être configurée de différentes manières, notamment le type de fichier et son emplacement dans le système de fichiers. La flexibilité de Webpack nous permet même d'appliquer des transformations spécifiques aux fichiers en fonction de l'endroit où ils sont importés dans le projet.

Effectuez le même processus d'analyse pour le chargeur de Webpack. Webpack nous permet d'appliquer une logique similaire pour déterminer quel chargeur doit être utilisé. Pour cette raison, le chargeur a déjà analysé sa propre configuration. Si Webpack ne parvient pas à effectuer une recherche dans le chargeur, une erreur d'exécution sera générée.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.