Configurando diferentes entornos en webpack

Pará, pará, pará… vos me estás diciendo que puedo usar cosas como webpack-dashboard en desarrollo y seguir teniendo el build de producción rápido y cortito como beso de marido? Sí.

El cómo es bastante simple: creamos una configuración base con los plugins, loaders y preferencias compartidas para después extenderla en la versión específica para cada entorno. Finalmente, en nuestros npm scripts, tenemos que apuntar al archivo de configuración correspondiente.

En mi caso, el `webpack.config.base.js` quedó algo así

Aprovecho para comentar un poco qué estoy usando:

eslint: desde que lo empecé a usar, es lo primero que agrego a un proyecto. Junto con el plugin de Atom y un archivo .eslintrc, podés configurar el code style de tu proyecto y corroborar que se cumpla en cada build (y rebuild) de webpack.

resolve.root: esta configuración nos permite importar módulos absolutos en nuestro código relativos a la carpeta especificada. En mi ejemplo, puedo acceder a src/modulos/sarlompa.js utilizando import sarlompa from ‘modulos/sarlompa’ desde cualquier parte de mi código.

url-loader: se encarga de incrustar en el bundle de javascript todos los archivos de imágenes que, en mi caso, sean inferiores a 100kb. Jugando con este valor se pueden ahorrar varias idas y vueltas al servidor y latencias como cuando se cambia una imagen dinámicamente, por ejemplo.

postcss: te permite hacer varios tipos de transformaciones o chequeos a tus archivos css. En este ejemplo sólo uso cssnano, configurado para poner los prefijos específicos de cada navegador automáticamente y sólo si es necesario.


Ahora sí, sigamos con lo que el título de este post prometía. No, no es una promesa de campaña 🎈, les voy a contar cómo sigue esto posta.

El próximo paso es crear una configuración para cada uno de los entornos donde queremos agregar o cambiar algo de la configuración básica.

Así me quedó mi cofiguración de desarrollo, con una sola modificación: agregar webpack-dashboard

En producción agregué image-webpack para comprimir los svg, optimización que no valía la pena hacer en desarrollo.

Dos cosas a notar:

  1. Estoy usando webpack-merge para hacer la fusión de los dos objetos: la configuración base y la configuración específica del entorno.
  2. Me olvidé de la dos mientras escribía la uno. Hagan de cuenta que sólo dije una. Programar todo el día tiene su precio.

Ahora, en nuestro package.json tenemos que decirle a cada comando qué archivo de configuración usar, y listo.


No dejes que pachorra te gane, usar diferentes configuraciones de webpack para cada entorno es algo que vas a necesitar más temprano que tarde en tu proyecto y hoy es un gran día para hacerlo. Agarrá ese monstruoso archivo de configuración lleno de ifs y requires en cualquier lado y refactoreá como si no hubiera mañana. 👋

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.