webpack

Automatizacion y Build
[Getting Started webpack](https://webpack.js.org/guides/getting-started/)

Conceptos base

Entry
Entrada principal del bundle. Puede ser un solo archivo o múltiples puntos de entrada para dividir la aplicación.
Output
Define dónde se almacena el bundle final, normalmente en ./dist. El objeto output permite definir path, filename y más.
Path library
Uso del módulo nativo path de Node.js para resolver rutas absolutas en la configuración:

	const path = require('path');
	```

- **Loaders**  
	Piezas clave para transformar archivos: JS moderno, CSS, imágenes, fuentes, TypeScript, Vue, React, etc.
- **Plugins**  
	Extienden capacidades del bundler: optimización, HTML automático, limpieza del directorio `dist`, variables de entorno, análisis del bundle.
- **Dev Server**  
	Servidor de desarrollo con recarga en caliente y proxy. Útil para DX y flujos SPA.
- **Minificación y Uglify**  
	Optimización del código en modo producción: minificación JS, compresión de CSS, tree-shaking, eliminación de código muerto.

## Configuración mínima
- Ejemplo simplificado de `webpack.config.js`:
	
```js
	const path = require('path');

	module.exports = {
		entry: './src/index.js',
		output: {
			filename: 'bundle.js',
			path: path.resolve(__dirname, 'dist')
		}
	};
	```


## Loaders comunes
- **babel-loader**  
	Transpile moderno → ES5. Requiere `.babelrc` o config en package.json.
- **css-loader y style-loader**  
	Permiten usar CSS dentro de JS.  
	
```js
	module.exports = {
		module: {
			rules: [
				{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
			]
		}
	};
	```

- **file-loader / asset modules**  
	Manejo de imágenes, fuentes y otros archivos. Webpack 5 usa módulos `asset/resource`, `asset/inline`, etc.
- **ts-loader / babel con TS**  
	Compilar TypeScript directamente o vía Babel para mejoras de rendimiento.

## Plugins esenciales
- **HtmlWebpackPlugin**  
	Genera un HTML e inyecta el bundle automáticamente.
- **CleanWebpackPlugin**  
	Limpia `dist` antes de cada build.
- **DefinePlugin**  
	Inyectar variables de entorno en el código.
- **MiniCssExtractPlugin**  
	Extrae CSS a archivos separados, útil en producción.
- **TerserWebpackPlugin**  
	Minificación avanzada de JS (sustituto moderno de Uglify).

## Webpack Dev Server
- soporta:
	- recarga en caliente (HMR)
	- historyApiFallback para SPAs
	- proxy para APIs locales/remotas
	- compresión gzip
- ejemplo:
	
```js
	devServer: {
		static: './dist',
		open: true,
		hot: true,
		port: 3000
	}
	```


## Modos y optimización
- **Mode**  
	- `development`: sin minificación, mejor debugging.  
	- `production`: activa tree-shaking, minify, scope-hoisting.  
- **Code splitting**  
	División del código en chunks dinámicos (`import()`), vendors y módulos compartidos.
- **Caching**  
	Usar `filename: '[name].[contenthash].js'` para cache optimizado.
- **Tree-shaking**  
	Remoción automática de imports no usados si los módulos son ES Modules.

## Arquitectura recomendada de proyecto
- `/src`  
	- `index.js` o `main.js`
	- componentes o módulos
	- archivos de estilos
- `/dist`  
	Generado automáticamente.
- `webpack.config.js`  
	Config principal o dividida por entornos:
		- `webpack.common.js`
		- `webpack.dev.js`
		- `webpack.prod.js`

## Configuración avanzada
- **Multiples entry points**  
	Para apps grandes o microfrontends.
- **DLL / Caching persistente**  
	Para acelerar builds.
- **Integración con frameworks**  
	React, Vue, Svelte usando loaders específicos.
- **Module Federation**  
	Arquitectura para microfrontends, compartir módulos entre aplicaciones.
- **Optimización de imágenes**  
	Plugins específicos para comprimir PNG, JPG, SVG.
- **Source Maps**  
	Diferentes niveles: `eval`, `source-map`, `cheap-module-source-map`.

## Scripts recomendados en package.json

```json
{
	"scripts": {
		"start": "webpack serve --mode=development",
		"build": "webpack --mode=production"
	}
}

webpack – ampliación de conceptos pendientes

Arquitectura interna de webpack

Module Graph
Estructura interna donde webpack representa cada archivo como un nodo y sus dependencias como aristas. Permite aplicar optimizaciones como tree-shaking y code splitting.
Chunking System
Un “chunk” es una agrupación lógica de módulos. Webpack decide qué módulos agrupa según entradas, imports dinámicos, cache groups y reglas del optimizador.
Build Lifecycle
Fases claves: inicialización, creación del grafo, optimización, compilación final y emisión (emit). Plugins se enganchan mediante hooks en cualquiera de estas etapas.

Profundización en Loaders

Pipeline de loaders
Los loaders se ejecutan en orden inverso al que se declaran. El último carga, el primero transforma. Permite generar pipelines complejos (por ejemplo: TS → Babel → minificador).
Loaders asíncronos
Algunos loaders pueden ser async (this.async()), permitiendo operaciones de IO, optimizaciones o llamadas internas.
Resolución avanzada
Se puede configurar resolve.extensions, alias, fallback, para transformar cómo se resuelven archivos en proyectos grandes o monorepos.

Profundización en Plugins

Tapable y sistema de hooks
Webpack usa la librería Tapable. Los plugins se conectan a eventos como compile, emit, afterEmit, optimizeChunks.
Esto permite modificar casi cualquier parte del proceso.
Plugins de análisis
Herramientas como Bundle Analyzer permiten visualizar el tamaño de los módulos en forma de treemap.
Plugins de producción avanzada
- Compresión Brotli y Gzip
- Pre-rendering (generar HTML estático)
- Prefetch/Preload para optimizar carga inicial

Optimización Avanzada

SplitChunks en profundidad
Permite agrupar librerías externas en vendors, crear cache groups personalizados, separar estilos, etc.
Runtime Chunk
Extrae el runtime de webpack a un archivo separado (runtime.js) para mejorar caching a largo plazo.
Layered Code Splitting
División basada en rutas, características, idioma o entorno.
SideEffects flag
Los paquetes pueden declarar "sideEffects": false en package.json para ayudar a eliminar código muerto.
Deterministic Chunk IDs
Controla la estabilidad de los nombres de chunks para builds consistentes.

Desarrollo profesional con Webpack

Configuración monorepo
Integración con Yarn Workspaces o PNPM, aprovechando resolve.alias, rutas relativas al root y builds compartidos.
Empaquetado para librerías
Configuración de output.library, libraryTarget, externals para crear librerías compartibles (UMD, ESM, CommonJS).
Webpack y servidores backend
Uso como middleware en Express (via webpack-dev-middleware) para SSR o aplicaciones universales.
Integración con CI/CD
Optimización de caché en pipelines, builds incrementales y comparación de bundles entre versiones.

Seguridad y control de entorno

Content Security Policy (CSP)
Configuración de hashes o nonces para trabajar con HTML generado automáticamente.
Subresource Integrity (SRI)
Plugins que generan integridad para proteger cargas de scripts desde CDN.
Variables de entorno
Uso de DefinePlugin con .env, integraciones con dotenv, dotenv-expand y sistemas de secretos.

Workflows avanzados

Babel + Webpack + SWC/Esbuild híbrido
Usar esbuild-loader o swc-loader para acelerar la transformación JS/TS.
Lazy Compilation (webpack 5)
Compilación bajo demanda: solo se compilan módulos cuando realmente se necesitan durante el desarrollo.
Module Federation avanzado
Compartición dinámica de módulos entre múltiples aplicaciones, con manejo de versiones, fallback remoto y cache local.

Debugging y herramientas

Profiling
Generación de perfiles (--profile) para detectar cuellos de botella.
Stats JSON
Permite exportar el grafo completo y analizarlo externamente.
Log levels
Control detallado de logs: info, warn, error, verbose.

Patrones y mejores prácticas

Separación completa de entornos
- webpack.common.js
- webpack.dev.js
- webpack.prod.js
- webpack.analyze.js (opcional)
Evitar entry points enormes
Promover imports dinámicos, modularidad y chunks por ruta.
Usar assets modernos
Preferir asset modules en vez de file-loader/url-loader.
Persistencia de caching
Cache de filesystem incorporado en webpack 5 para builds más rápidos.

Integración con frameworks y ecosistemas

React
JSX, Fast Refresh con react-refresh-webpack-plugin, optimización para producción con splits.
Vue
Uso de vue-loader, integración con SFCs, HMR nativo.
Svelte
svelte-loader para compilar componentes a JS vanilla.
SSR y prerender
Webpack puede servir como base para SSR con frameworks propios o setups personalizados.

Extensión estructural del proyecto

Aliases
Definir rutas cortas (@components, @utils) para mejorar mantenibilidad.
Módulos externos
Control de qué dependencias no deben incluirse en el bundle final para librerías o microfrontends.
Compatibilidad con navegadores
browserslist, targets específicos, polyfills automáticos o manuales.

webpack – novedades y detalles actualizados a 2025

Estado actual y versiones recientes

webpack sigue vivo: la versión más reciente estable en 2025 es 5.102.1.
El repositorio de cambios de webpack 5 (changelog-v5) quedó archivado en febrero de 2025

Cambios recientes en webpack 5 (importantes hoy)

IDs deterministas por defecto para módulos y chunks en producción (chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic") ayudan a cache a largo plazo.
En modo desarrollo, chunk IDs “nombrados” (chunkIds: "named") permiten que los bundles tengan nombres legibles, útil para debugging.
Module Federation: permite que múltiples builds independientes compartan módulos dinámicamente en runtime — ideal para arquitecturas de micro-frontends.
webpack 5 incluye soporte nativo a módulos de tipo “asset modules” — ya no es obligatorio usar loaders externos para imágenes, fuentes, etc.
Se alinea con nuevas características modernas de la web: uso de import.meta.url, soporte para carga de Web Workers vía new URL("./worker.js", import.meta.url), etc.

Ecosistema: evolución de Module Federation

En abril de 2024 se anunció la versión 2.0 de Module Federation: ahora el runtime se ha extraído como SDK independiente, lo que permite cargar módulos remotos en runtime sin depender estrictamente de webpack u otra herramienta de build.
Esto abre la puerta a combinaciones entre diferentes bundlers/compiladores (no sólo webpack), lo que favorece flexibilidad y compatibilidad en arquitecturas modernas.
Es útil para escenarios avanzados: micro-frontends, carga dinámica de módulos, lazy loading compartido, versiones compartidas de librerías entre apps, sin recompilar todo.

Implicaciones para proyectos nuevos o en mantenimiento (2025)

Si usas webpack 5 en producción — acepta IDs deterministas para mejorar caching.
Evita asumir polyfills automáticos de módulos de Node.js: dado que webpack ya no los incluye por defecto, si necesitas compatibilidad con algunos módulos “core”, debes configurar resolve.fallback u otras alternativas.
Para arquitecturas modernas con micro-frontends o compartición de librerías entre apps, considerar el uso de Module Federation (ideal con la versión 2.0) como estrategia de modularización.
Aprovechar asset modules nativos para gestionar imágenes, fuentes, otros recursos — simplifica configuración y reduce dependencia de loaders extras.

Recursos oficiales / actualizados

[Module Federation webpack](https://webpack.js.org/concepts/module-federation/) — documentación oficial de Module Federation.
webpack / changelog-v5 — historial de cambios (aunque el repo está archivado, sigue siendo referencia principal para cambios desde webpack 4 → 5).
What’s New in webpack 5 — resumen de las novedades principales.

Qué considerar mirar si estás empezando ahora con webpack en 2025

Configurar correctamente caching, hashing y nombres de chunks para producción.
Revisar compatibilidad de módulos Node.js si los necesitas.
Evaluar si conviene usar Module Federation, especialmente si planeas micro-frontends o varias apps compartiendo código.
Aprovechar asset modules nativos.
Mantener webpack actualizado (versión 5.100+ en adelante).