Configurar Webpack desde cero puede sonar intimidante, pero con los plugins correctos y un archivo de configuración bien estructurado, el proceso se vuelve claro y replicable. Aquí aprenderás a instalar las dependencias clave y a montar el archivo webpack.config.js que prepara tu proyecto JavaScript para producción.
¿Qué plugins necesitas para configurar Webpack?
Antes de tocar el archivo de configuración, necesitas instalar las herramientas que harán el trabajo pesado: empaquetar HTML, copiar archivos y traducir JavaScript moderno para cualquier navegador.
Los paquetes que vas a instalar como dependencias de desarrollo son:
html-webpack-plugin: inyecta automáticamente tu archivo HTML en la carpeta de salida.
copy-webpack-plugin: copia recursos estáticos al build final.
@babel/core y babel-loader: permiten que Webpack entienda y transforme JavaScript moderno.
El flag -D indica que son dependencias de desarrollo, porque solo las usarás durante el proceso de build, no en producción [01:30].
¿Qué hace babel-loader en Webpack? Traduce JavaScript moderno (ES6+) a una versión compatible con navegadores antiguos, usando @babel/core como motor.
¿Cómo se estructura el archivo webpack.config.js?
El archivo de configuración vive en la raíz del proyecto y Webpack lo detecta automáticamente. Allí defines puntos de entrada, salida, extensiones, reglas y plugins.
¿Qué es entry y output en Webpack?
El entry es el archivo principal desde donde Webpack empieza a construir el grafo de dependencias. El output define dónde y con qué nombre se guarda el resultado.
Usar path.resolve con __dirname garantiza que la ruta funcione en cualquier máquina o entorno en la nube, sin depender de rutas absolutas locales [04:20].
La carpeta dist (de distribution) es un estándar reconocido por la mayoría de plataformas de despliegue. El nombre del archivo resultante, en cambio, es flexible: puede ser main.js, bundle.js o incluso un hash.
¿Por qué la carpeta se llama dist? Es la convención que usan los servicios de hosting y CI/CD para identificar el código listo para producción.
¿Cómo defines extensiones y reglas con Babel?
La propiedad resolve.extensions le dice a Webpack qué tipos de archivo debe procesar sin necesidad de escribir la extensión completa al importar.
Si más adelante trabajas con TypeScript, agregarías .ts. Para React, necesitarías .jsx. Y si construyes módulos nativos, sumas .mjs.
Dentro de rules, la expresión regular /\.js$/ indica qué archivos procesar, mientras que exclude: /node_modules/ evita que Webpack intente transformar las miles de dependencias instaladas. Sin esa exclusión, tu bundle crecería innecesariamente y el tiempo de compilación se dispararía [07:15].
¿Cómo integrar HTML Webpack Plugin en la configuración?
Este plugin se encarga de tomar tu plantilla HTML, inyectar las etiquetas <script> con los archivos generados y copiarla a la carpeta dist.
inject: en true, agrega automáticamente los scripts compilados al HTML.
template: ruta al HTML fuente que sirve como base.
filename: nombre del archivo final dentro de dist, que suele mantenerse como index.html por ser el punto de entrada de la web [09:40].
Con esta configuración, Webpack ya sabe leer tu JavaScript moderno, empaquetarlo, generar un HTML listo para servir y dejarlo todo en una carpeta dist lista para subir a producción.
¿Vas a probar esta configuración en tu próximo proyecto? Cuéntame en los comentarios qué stack estás usando y qué plugins extra te gustaría integrar.
