🧰 Webpack · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de Webpack

Bundling ⭐ 63k stars
Empaquetador de módulos que crea un grafo de dependencias y genera uno o más bundles.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

Sistema para manejar dependencias
Sistema de plugins
Hot Module Replacement

2 · Casos de uso

Empaquetar JS para el navegador
Code splitting para tiempos de carga
Transpilar ES6/JSX a ES5

3 · Script minimalista

Instalación: npm i -D webpack webpack-cli

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' },
};

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Config con Babel

Transpila JSX/ES6 con babel-loader.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js', path: __dirname + '/dist' },
  module: { rules: [{ test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }] },
};

🔁 Cómo funciona: webpack construye el grafo de dependencias y `babel-loader` convierte JSX/ES6 a ES5.

2. Dev server con HMR

Servidor de desarrollo con recarga en caliente.

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') },
  devServer: { static: './dist', hot: true, port: 3000 },
};

🔁 Cómo funciona: `devServer.hot` actualiza los módulos en caliente sin recargar la página.

5 · Referencia

Categoría	Bundling
Stars (GitHub)	⭐ 63k
Sitio oficial	https://webpack.js.org/
GitHub	https://github.com/webpack/webpack
Instalación	`npm i -D webpack webpack-cli`
Relacionadas	Rollup · Parcel · Gulp

📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.