En esta sección, aprenderemos cómo configurar Webpack en un proyecto desde cero. Cubriremos los pasos necesarios para instalar Webpack y sus dependencias, así como la creación de un archivo de configuración básico.

Para comenzar, necesitamos instalar Webpack y Webpack CLI (Command Line Interface) en nuestro proyecto. Esto se hace utilizando npm (Node Package Manager).

Primero, asegúrate de tener Node.js y npm instalados en tu sistema. Luego, inicializa un nuevo proyecto Node.js:

El comando npm init -y crea un archivo package.json con la configuración predeterminada.

A continuación, instala Webpack y Webpack CLI como dependencias de desarrollo:

Vamos a crear una estructura básica de carpetas y archivos para nuestro proyecto.

El archivo src/index.js será nuestro punto de entrada principal.

Webpack utiliza un archivo de configuración para definir cómo debe compilar y empaquetar los archivos de tu proyecto. Por convención, este archivo se llama webpack.config.js.

Crea un archivo webpack.config.js en la raíz de tu proyecto:

Abre webpack.config.js y añade la siguiente configuración básica:

• entry: Define el punto de entrada de la aplicación. En este caso, es ./src/index.js.
• output: Configura el archivo de salida.
  • filename: Nombre del archivo compilado, en este caso bundle.js.
  • path: Ruta absoluta de la carpeta donde se guardará el archivo compilado. Utilizamos path.resolve para obtener la ruta absoluta.
• mode: Define el modo de compilación. Puede ser development, production o none.

Para compilar el proyecto, añade un script en el archivo package.json:

Ahora, puedes compilar tu proyecto ejecutando:

Esto generará un archivo bundle.js en la carpeta dist.

Vamos a añadir algo de código en src/index.js para ver cómo funciona la compilación.

Añade el siguiente código a src/index.js:

Ejecuta el comando de compilación:

Deberías ver un archivo bundle.js en la carpeta dist. Abre este archivo y verifica que contiene el código compilado.

1. Crea un nuevo archivo src/app.js y añade el siguiente código:

2. Modifica src/index.js para importar y usar la función greet:

3. Actualiza el archivo de configuración webpack.config.js para incluir el nuevo archivo app.js.

1. Crear src/app.js:

2. Modificar src/index.js:

3. No es necesario actualizar webpack.config.js ya que Webpack automáticamente sigue las dependencias importadas.

4. Ejecutar el comando de compilación:

Deberías ver el mensaje "Hola desde app.js" en la consola cuando ejecutes el archivo bundle.js en un entorno de navegador o Node.js.

En esta sección, hemos aprendido cómo configurar Webpack en un proyecto desde cero. Hemos cubierto la instalación de Webpack, la creación de una estructura básica de proyecto, la configuración de Webpack y la compilación de nuestro proyecto. En la siguiente sección, profundizaremos en el archivo de configuración de Webpack y exploraremos más opciones y configuraciones avanzadas.