En esta sección, aprenderemos sobre el archivo de configuración de Webpack, que es fundamental para personalizar y controlar el comportamiento de Webpack en nuestros proyectos. Este archivo nos permite definir cómo se deben procesar y empaquetar nuestros archivos.

El archivo de configuración de Webpack es un archivo JavaScript que exporta un objeto de configuración. Este objeto contiene todas las opciones necesarias para que Webpack sepa cómo compilar y empaquetar nuestro proyecto. Por defecto, Webpack busca un archivo llamado webpack.config.js en el directorio raíz del proyecto.

A continuación, se muestra un ejemplo básico de un archivo de configuración de Webpack:

1. Entry (Punto de Entrada):

   • Define el punto de entrada de la aplicación, es decir, el archivo principal desde donde Webpack comenzará a construir la dependencia del gráfico.

   entry: './src/index.js'
   

2. Output (Salida):

   • Configura el nombre y la ubicación del archivo de salida que Webpack generará.

   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
   }
   

3. Module (Módulo):

   • Define las reglas para cómo Webpack debe tratar diferentes tipos de archivos. En este caso, estamos utilizando babel-loader para transpilar archivos JavaScript.

   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['@babel/preset-env']
           }
         }
       }
     ]
   }
   

4. Plugins:

   • Aquí se pueden agregar plugins que extienden las capacidades de Webpack.

   plugins: [
     // Ejemplo: new HtmlWebpackPlugin({ template: './src/index.html' })
   ]
   

5. Mode (Modo):

   • Define el modo de compilación, que puede ser development, production o none.

   mode: 'development'
   

1. Crea un nuevo proyecto y navega al directorio del proyecto.
2. Instala Webpack y Webpack CLI:

   npm install --save-dev webpack webpack-cli
   

3. Crea un archivo webpack.config.js en el directorio raíz del proyecto.
4. Configura el archivo de la siguiente manera:

   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist')
     },
     mode: 'development'
   };
   

5. Crea un directorio src y dentro de él un archivo index.js con el siguiente contenido:

   console.log('Hello, Webpack!');
   

6. Ejecuta Webpack:

   npx webpack
   

7. Verifica que se haya creado el archivo bundle.js en el directorio dist.

El archivo webpack.config.js debería verse así:

Y el archivo src/index.js debería contener:

Al ejecutar npx webpack, Webpack debería compilar el archivo index.js y generar bundle.js en el directorio dist.

En esta sección, hemos aprendido sobre la estructura básica del archivo de configuración de Webpack y cómo configurarlo para un proyecto simple. Este archivo es esencial para personalizar el comportamiento de Webpack y adaptarlo a las necesidades específicas de tu proyecto. En las siguientes secciones, profundizaremos en conceptos más avanzados y configuraciones adicionales que puedes aplicar en tu archivo de configuración de Webpack.