Principe de fonctionnement du bundler Webpack en JavaScript

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 commun 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 commun, qui est ensuite 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. À ces modules, d'autres modules peuvent également être liés. Le bundler suit toutes les connexions et rassemble tout le code en un seul fichier. Ce fichier est appelé bundle.

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.

Le bundler permet également de réguler le mode de construction. Le mode 'development' est destiné au processus de développement. Il assemble le code de manière pratique pour le développement. Le mode 'production' est destiné au code final qui sera mis en production. Dans ce mode, le code sera minifié afin d'en réduire la taille et d'augmenter la vitesse de chargement.