Principio de funcionamiento del empaquetador Webpack en JavaScript

Por regla general, durante el desarrollo obtenemos muchos archivos JavaScript, que contienen varios fragmentos de código. Estos 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 juntar todo el código en un solo archivo.

Sin embargo, desarrollar el código en un archivo general tampoco es muy conveniente. Por eso 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 al 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 empaquetado se coloca en la carpeta dist.

El empaquetador también permite regular el modo de empaquetado. El modo 'development' está destinado para el proceso de desarrollo. Empaqueta el código de forma conveniente para el desarrollo. El modo 'production' está destinado para el código final, que será publicado en funcionamiento. En este modo el código será minificado, para reducir su tamaño y aumentar la velocidad de carga.