Preparar un proyecto real para producción con Webpack es el paso natural después de comprender sus fundamentos. A continuación se explica cómo configurar un portafolio personal que integra CSS, fuentes, imágenes y JavaScript Vanilla, todo optimizado mediante Webpack para generar un bundle eficiente.
¿Qué incluye el proyecto portafolio?
El proyecto consiste en un portafolio personal que muestra foto, nombre, correo electrónico, ubicación y redes sociales. Para generar datos de forma dinámica se consume la API Random User [0:38], que entrega información aleatoria cada vez que se recarga la página. Esto permite practicar lógica de JavaScript sin depender de datos estáticos.
La estructura del proyecto sigue una organización clara:
- Carpeta public: archivos públicos del proyecto.
- Carpeta source: contiene el código fuente sin empaquetar.
- Archivos raíz como
.gitignore, package.json, licencia y README.
Dentro de source encontramos:
- HTML, CSS y JavaScript Vanilla sin frameworks ni librerías.
- Fuentes: la tipografía Ubuntu de Google Fonts.
- Imágenes: íconos de GitHub, Instagram y Twitter.
- Estilos ya listos para el proyecto.
- Un sistema de templates que genera la interfaz de forma modular [3:22].
- Una utilería de fetch que conecta con la API de Random User [3:38].
- El punto de entrada donde se concentra la lógica principal y la manipulación del DOM [3:50].
¿Cómo se instala Webpack en el proyecto?
Una vez clonado el repositorio desde GitHub, el primer paso es instalar las dependencias necesarias. Desde la terminal, dentro de la carpeta del proyecto, se ejecuta [4:20]:
bash
npm install webpack webpack-cli -D
La bandera -D indica que se trata de una dependencia de desarrollo, ya que Webpack solo se necesita durante el proceso de construcción, no en el entorno de producción final.
¿Qué ocurre al compilar sin configuración personalizada?
Antes de crear un archivo de configuración propio, se puede probar la configuración por defecto de Webpack ejecutando [4:50]:
bash
npx webpack --mode production
El comando npx permite ejecutar paquetes instalados localmente. Al indicar --mode production, Webpack aplica automáticamente minificación y optimizaciones. El resultado es un archivo main.js dentro de la carpeta dist que contiene toda la lógica, los templates y las utilidades del proyecto comprimidos en un solo bundle [5:15].
¿Qué significa el modo producción en Webpack?
Cuando se utiliza --mode production, Webpack activa internamente varias optimizaciones:
- Minificación del código JavaScript.
- Eliminación de código muerto (tree shaking).
- Compresión del bundle final.
Esto genera un archivo mucho más ligero y eficiente para ser servido en un servidor web real.
¿Cuáles son los próximos pasos del proyecto?
El objetivo es ir más allá de la configuración por defecto. En las siguientes etapas se creará un archivo de configuración (webpack.config.js) donde se definirán [5:40]:
- Punto de entrada (entry): el archivo principal desde donde Webpack comienza a resolver dependencias.
- Punto de salida (output): la ubicación y nombre del bundle generado.
- Configuraciones adicionales: manejo de CSS, fuentes, imágenes y otras optimizaciones específicas.
La idea central es que el portafolio quede completamente preparado para producción, con todos sus recursos procesados y optimizados por Webpack. El proyecto final se puede personalizar con datos propios para tener un portafolio funcional y compartible.
¿Ya tienes claro cómo quieres personalizar tu portafolio? Comparte tus ideas y dudas en los comentarios.
