Webpack y bundlers en Platzi: entender la herramienta que transforma el código

El archivo `webpack.config.js` era, para mí, el archivo que no se tocaba — el que alguien configuró hace tres años y que "funciona". Hasta que dejó de funcionar y no supe por dónde empezar.

El curso de Webpack en Platzi cambió esa dependencia en comprensión.

Qué hace un bundler (y por qué lo necesitás)

El navegador no entiende `import` y `require` de Node.js. No puede consumir TypeScript directamente. No puede procesar SCSS. Un bundler toma todo ese código fuente y lo transforma en JavaScript, CSS y HTML que el navegador entiende — optimizado, minificado, con los assets correctamente referenciados.

Webpack es el más configurado. Vite es el más rápido para desarrollo. Parcel es el más simple. El curso explica Webpack en profundidad — y con eso, los demás son mucho más fáciles de entender.

Por qué importa para el rendimiento de los proyectos

Code splitting, lazy loading de módulos, tree shaking para eliminar código no usado — esas son las optimizaciones que hacen que una app de React cargue en 1.2s en lugar de 4.8s. Todas dependen de entender qué hace el bundler.

En los proyectos de desarrollo web que entregamos, la configuración del bundler es parte de la arquitectura del proyecto — no un detalle al final. El bundle size de producción es una métrica de calidad que revisamos antes de entregar.

El futuro de los bundlers

Vite y Turbopack están reemplazando a Webpack en proyectos nuevos por velocidad de desarrollo. Pero la conceptualización de qué es un bundler y qué problema resuelve sigue siendo la misma. El que entiende Webpack entiende Vite en una tarde.

Si trabajás en un proyecto con problemas de rendimiento de build o de carga de producción, contanos los síntomas — generalmente tienen solución directa.