Las variables de entorno son una herramienta esencial en el desarrollo de aplicaciones modernas. Permiten configurar diferentes aspectos de una aplicación sin necesidad de modificar el código fuente. En el contexto de Webpack, las variables de entorno se utilizan para cambiar la configuración de la compilación según el entorno (desarrollo, producción, etc.).

Las variables de entorno son pares clave-valor que se pueden utilizar para almacenar información que puede cambiar entre diferentes entornos. Por ejemplo, podrías tener una variable de entorno API_URL que apunte a una URL diferente en desarrollo y en producción.

Webpack proporciona el plugin DefinePlugin para definir variables globales que pueden ser configuradas en tiempo de compilación. Este plugin reemplaza las variables en el código fuente con los valores especificados.

Ejemplo de Configuración

En este ejemplo, process.env.NODE_ENV y process.env.API_URL se reemplazarán con los valores de las variables de entorno correspondientes.

Para gestionar las variables de entorno de manera más sencilla, puedes utilizar el paquete dotenv. Este paquete carga las variables de entorno desde un archivo .env en process.env.

Instalación

Configuración

Crea un archivo .env en la raíz de tu proyecto:

Luego, carga estas variables en tu configuración de Webpack:

Para establecer variables de entorno en scripts de npm de manera multiplataforma, puedes utilizar el paquete cross-env.

Instalación

Configuración

Modifica tus scripts en package.json para usar cross-env:

Configurar un proyecto Webpack para utilizar variables de entorno y cambiar la URL de una API según el entorno.

1. Instalar Dependencias:

   npm install webpack webpack-cli webpack-dev-server dotenv cross-env --save-dev
   

2. Crear Archivos Necesarios:

   • webpack.config.js
   • .env
   • src/index.js

3. Configurar webpack.config.js:

   const path = require('path');
   const webpack = require('webpack');
   const dotenv = require('dotenv');
   
   dotenv.config();
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist')
     },
     plugins: [
       new webpack.DefinePlugin({
         'process.env.API_URL': JSON.stringify(process.env.API_URL)
       })
     ],
     devServer: {
       contentBase: path.join(__dirname, 'dist'),
       compress: true,
       port: 9000
     }
   };
   

4. Configurar .env:

   API_URL=http://localhost:3000/api
   

5. Crear src/index.js:

   console.log('API URL:', process.env.API_URL);
   

6. Agregar Scripts en package.json:

   {
     "scripts": {
       "start": "cross-env NODE_ENV=development webpack serve",
       "build": "cross-env NODE_ENV=production webpack"
     }
   }
   

Después de seguir los pasos anteriores, ejecuta los siguientes comandos para verificar la configuración:

• Para desarrollo:

  npm start
  

• Para producción:

  npm run build
  

En esta sección, aprendiste cómo utilizar variables de entorno en Webpack para configurar tu aplicación según diferentes entornos. Usar DefinePlugin, dotenv y cross-env te permite gestionar estas variables de manera eficiente y mantener tu código limpio y adaptable. En el siguiente módulo, exploraremos herramientas de desarrollo adicionales que pueden mejorar tu flujo de trabajo con Webpack.