En Webpack, los puntos de entrada (entry points) son el punto de inicio desde donde Webpack comienza a construir su grafo de dependencias. Esencialmente, le indican a Webpack cuál archivo o archivos debe usar para comenzar a empaquetar su aplicación.

• Punto de Entrada Único: Un solo archivo de entrada desde el cual Webpack comienza a construir el grafo de dependencias.
• Múltiples Puntos de Entrada: Varios archivos de entrada que Webpack utiliza para crear múltiples paquetes.
• Objeto de Puntos de Entrada: Un objeto que define múltiples puntos de entrada con nombres específicos.

Para configurar un punto de entrada único, se define una propiedad entry en el archivo de configuración de Webpack (webpack.config.js).

En este ejemplo:

• entry: Especifica el archivo de entrada (./src/index.js).
• output: Define el nombre del archivo de salida (bundle.js) y la ruta donde se guardará (/dist).

Para configurar múltiples puntos de entrada, se puede pasar un array de archivos a la propiedad entry.

En este ejemplo:

• entry: Especifica múltiples archivos de entrada (./src/index.js y ./src/app.js).
• Webpack combinará ambos archivos en un solo paquete (bundle.js).

Para una configuración más avanzada, se puede usar un objeto para definir múltiples puntos de entrada con nombres específicos.

En este ejemplo:

• entry: Define dos puntos de entrada (main y admin).
• output: Usa [name] como un placeholder para los nombres de los puntos de entrada, generando main.bundle.js y admin.bundle.js.

Supongamos que tenemos una aplicación con dos partes: una para usuarios y otra para administradores. Queremos crear dos paquetes separados para cada parte.

./src/user/index.js

./src/admin/index.js

Después de ejecutar Webpack, se generarán dos archivos en la carpeta /dist:

• user.bundle.js
• admin.bundle.js

1. Crea un proyecto con la siguiente estructura:

   /src
     /home
       index.js
     /dashboard
       index.js
   webpack.config.js
   

2. Configura Webpack para que tenga dos puntos de entrada: home y dashboard.

3. En ./src/home/index.js, agrega el siguiente código:

   console.log('Home module loaded');
   

4. En ./src/dashboard/index.js, agrega el siguiente código:

   console.log('Dashboard module loaded');
   

5. Ejecuta Webpack y verifica que se generen los archivos home.bundle.js y dashboard.bundle.js en la carpeta /dist.

webpack.config.js

./src/home/index.js

./src/dashboard/index.js

Los puntos de entrada son fundamentales para definir cómo Webpack debe comenzar a empaquetar su aplicación. Ya sea que esté trabajando con un solo archivo de entrada o múltiples archivos, comprender cómo configurar los puntos de entrada le permitirá estructurar su proyecto de manera eficiente y modular. En el próximo tema, exploraremos cómo configurar la salida de Webpack para controlar cómo y dónde se generan los archivos empaquetados.