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:
- 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.
- 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. 👋
