Principio de funcionamiento del empaquetador Webpack

Por regla general, durante el desarrollo tenemos muchos archivos JavaScript, que contienen varios fragmentos de código. Pueden ser partes de nuestro código o bibliotecas de terceros. Resulta que cada uno de estos archivos debemos conectarlo al archivo HTML a través de la etiqueta script.

Esto no es muy bueno, ya que muchos archivos conectados ralentizan la velocidad de carga del sitio. Por lo tanto, para acelerar la carga es necesario colocar todo el código en un solo archivo.

Sin embargo, desarrollar código en un archivo general tampoco es muy conveniente. Por lo tanto, actualmente se practica el siguiente enfoque: el código se desarrolla en archivos separados, y luego con la ayuda de un empaquetador se recopila en un archivo general, que se conecta al archivo HTML.

Los archivos separados representan módulos ES. Estos módulos se conectan a otros archivos mediante el comando import.

Normalmente se crea un archivo principal, al cual se conectan los demás archivos. Este archivo se llama punto de entrada.

El empaquetador entra en el punto de entrada, ve qué módulos están conectados a él. A estos módulos también pueden estar conectados otros módulos. El empaquetador sigue todas las conexiones y recopila todo el código en un archivo. Este archivo se llama bundle (paquete).

Por regla general, el código que escribe el programador, se ubica en la carpeta src, y el código compilado se coloca en la carpeta dist.