Principe de fonctionnement du bundler Webpack

En règle générale, lors du développement, nous nous retrouvons avec de nombreux fichiers JavaScript, contenant divers morceaux de code. Cela peut être des parties de notre code, ou des bibliothèques tierces. Il en résulte que chacun de ces fichiers doit être lié au fichier HTML via la balise script.

Ce n'est pas idéal, car un grand nombre de fichiers liés ralentissent la vitesse de chargement du site. Par conséquent, pour accélérer le chargement, il est nécessaire de rassembler tout le code dans un seul fichier.

Cependant, développer le code dans un seul fichier général n'est pas non plus très pratique. C'est pourquoi l'approche suivante est actuellement pratiquée : le code est développé dans des fichiers séparés, puis, à l'aide d'un bundler, est assemblé en un seul fichier général, qui est lié au fichier HTML.

Les fichiers séparés sont des modules ES. Ces modules sont liés à d'autres fichiers via la commande import.

Habituellement, un fichier principal est créé, auquel les autres fichiers sont liés. Ce fichier est appelé point d'entrée.

Le bundler entre par le point d'entrée, regarde quels modules y sont liés. D'autres modules peuvent également être liés à ces modules. Le bundler suit toutes les connexions et rassemble tout le code en un seul fichier. Ce fichier est appelé bundle (paquet).

En règle générale, le code écrit par le programmeur se trouve dans le dossier src, et le code assemblé est placé dans le dossier dist.