Cursos Empresas Blog Live Conf Eventos Precios

0:0010:36

Recursos

Resumen

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 comando en tu terminal queda así:

bash npm install html-webpack-plugin copy-webpack-plugin @babel/core babel-loader -D

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.

javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');

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

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.

javascript resolve: { extensions: ['.js'] }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] }

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.

La instancia se agrega dentro del array plugins:

javascript plugins: [ new HtmlWebpackPlugin({ inject: true, template: './public/index.html', filename: 'index.html' }) ]

Las tres propiedades clave funcionan así:

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.

webpack.config.js con plugins esenciales

Curso de Introducción a Empaquetadores Web

Clase 6 de 23

Clase 6 / 23

Santiago Andres Alvarez Cuadros

Hace 4 años

Les comparto los conceptos de webpack que pueden encontrar en su documentación oficial .

Conceptos de webpack

Entry

. Un entry point indica qué módulo webpack debería empezar a utilizar para empezar a construir el gráfico de dependencias. . Webpack luego se encargará de verificar qué otros módulos y librerías aquel punto de entrada depende de (directa o indirectamente).

Por defecto, su valor es ./src/index.js, pero se puede especificar otro, o múltiples, punto de entrada:

//webpack.config.js
module.exports = {
	entry: './src/index.js'
}

Output

. La propiedad output le indica a webpack hacia dónde cargar los ‘paquetes’ ya creados y cómo deberían llamarse. Por defecto, los paquetes tendrán el nombre de main.js y se cargarán en la carpeta ./dist:

//webpack.config.js
const path = require('path');

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

path es un módulo de node.js que nos permite manipular los paths de los archivos. .

Loaders

. Por defecto, Webpack solamente entiende archivos .js y .JSON. Los loaders nos permiten especificar otro tipo de archivos para que webpack los pueda procesar y convertir en módulos válidos que pueden ser consumidos por nuestra aplicación y ser añadidos en el gráfico de dependencias. . Los loaders tienen tres propiedades:

test: identifica cuál o cuáles archivos serán transformados.
use: indica cuál loader debería ser utilizado para transformar los archivos.
exclude: indica archivos o carpetas que deberían ser ignoradas por el loader

//webpack.config.js
const path = require('path');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'main.js'
	},
	modules: {
		rules: [{test: /\.ts?$/, use: 'ts-loader', exclude: /node_modules/}]
	}
}

Plugins

. Los plugins son similares a los loaders pero nos permiten hacer cosas que no podríamos con los loaders, como optimización de los paquetes, inyección de variables y manejo de activos.

Para usar plugins, necesitamos traerlos con require() para agregarlos al array de plugins. Como podemos usar un mismo plugin con diferentes configuraciones para distintos propósitos, necesitamos crear instancias de los plugins utilizando el operador new.

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'main.js'
	},
	modules: {
		rules: [{test: /\.ts?$/, use: 'ts-loader', exclude: /node_modules/}]
	},
	plugins: [new HtmlWebpackPlugin({ template: './src/index.html'})]
}

Existe una gran cantidad de plugins que webpack nos provee. Acá una lista de plugins .

Mode

. Al colocar la propiedad mode en development, production o none, podemos activar las optimizaciones internas de webpack dependiendo del valor de mode que hayamos especificado. El valor por defecto es production.

Comentarios (13)13 comentarios

German Cavani

Les dejo los paquetes a instalar 😀

npm i html-webpack-plugin copy-webpack-plugin @babel/core babel-loader - D

Josue Cerron Tuesta

you rock man!

Andre Huaman Yovera

Hace 3 años

N40 M10

Mucha información en poco tiempo estoy mareado!

Federico Ivan Llano

Max Andy Diaz Neyra

Iba a dejar el código de la clase pero veo que ya lo hiciste. En su lugar dejo un aporte:

/**@type {import('webpack').Configuration} */
```Coloca esa linea encima de tu module.exports y te va a autocompletar las props de la configuracion. Saludos.

John Byron Alzate Hernández

Este archivo de configuración define las siguientes opciones:

entry: Especifica el archivo de entrada de su aplicación, en este caso ./src/index.js output: Especifica la ruta de salida y el nombre del archivo empaquetado, en este caso el archivo se llama bundle.js y se encuentra en la carpeta /dist module: Especifica las reglas para los módulos, en este caso se establece que todos los archivos .js deben ser procesados por babel-loader y los archivos .css deben ser procesados por style-loader y css-loader plugins: Especifica los plugins a utilizar, en este caso se utiliza HtmlWebpackPlugin para generar un archivo HTML a partir de una plantilla ./src/index.html Ten en cuenta que para que este código funcione, tendrás que tener instaladas las dependencias necesarias, como babel-loader, html-webpack-plugin y css-loader.

Rubén Ernesto Aragón Gil

/ \

alt + 92 = \

Kenneth Angulo L

Hace 3 meses

¿Cuándo debo usar diferentes extensiones en resolve?

Debes configurar el arreglo de extensions cuando tu proyecto escala y comienzas a mezclar diferentes tecnologías o sintaxis. Por defecto, Webpack entiende los archivos .js, pero en el ecosistema moderno es común omitir las extensiones al hacer un import (por ejemplo, import Header from './Header'). Si estás trabajando con React, necesitarás agregar .jsx para que Webpack sepa cómo leer esos componentes. Si decides migrar a TypeScript, deberás incluir .ts o .tsx. Al definir estas extensiones en la configuración de resolve, le ahorras a Webpack el trabajo de adivinar qué tipo de archivo estás importando. Simplemente buscará en el directorio el archivo que coincida con el nombre y alguna de las extensiones permitidas en el orden que las declaraste, haciendo tu código mucho más limpio.

¿Cómo inyecta Webpack el JavaScript al HTML?

Para lograr esta conexión automática, utilizamos el HtmlWebpackPlugin. En lugar de escribir manualmente la etiqueta <script> en tu archivo HTML, este plugin toma un archivo base (tu template ubicado en la carpeta public) y genera una nueva versión en la carpeta de salida (dist). La magia ocurre gracias a la propiedad inject: true. Cuando Webpack termina de empaquetar todo tu JavaScript y le asigna un nombre (incluso si usa hashes dinámicos para evitar problemas de caché), el plugin inserta automáticamente la etiqueta <script src="tu-archivo.js"></script> justo antes de cerrar el <body> del nuevo HTML. Esto es vital para producción, ya que si el nombre de tu archivo JavaScript cambia en cada compilación, no tendrás que actualizar el HTML de forma manual nunca más.

Jefred Bedoya

Hace 6 meses•editado

Configuración de Webpack para Aplicación Dinámica

Dependencias Esenciales

HTML Webpack Plugin: Gestiona la generación y el procesamiento de archivos HTML.
Copy Webpack Plugin: Permite mover archivos estáticos a la carpeta de distribución.
Babel Loader y Babel Core: Traducen JavaScript moderno para compatibilidad con diversos navegadores.

Estructura del Archivo webpack.config.js

Entry: Define el punto de entrada de la aplicación (usualmente src/index.js).
Output: Establece el directorio de salida (dist) y el nombre del archivo resultante.
Resolve: Configura las extensiones de archivo que Webpack reconocerá (ej. .js).
Module Rules: Define reglas de procesamiento, como el uso de Babel Loader para transpilar código, excluyendo la carpeta node_modules para optimizar el peso final.
Plugins: Instancia los complementos necesarios, configurando el template HTML base y activando la inyección automática de scripts.

German Tellez Vanegas

Muy buena esta clase, me estoy dando cuenta de las abstracciones que hacen los frameworks y nos damos por enterados

Francisco Manuel Sanchez Morales

Les comparto este recurso para que puedan crear sus archivos .gitignore

crean el archivo .gitignore y luego pegan es resultado de la pagina 🤙🏼

Diego Reyes Cabrera

Resolve.extensions

Esta configuración nos permite importar archivos sin especificar su extensión, algo así como:

import func from "./../functions/sayHi";

En verdad el archivo se llama sayHi.js, pero le estoy encargando a Webpack que resuelva la extensión por mí. . Un dato importante es que, Webpack resolverá la primera coincidencia en el array que le pasemos a resolve.extensions. . Por ejemplo, si tenemos estos dos archivos sayHi.css sayHi.js en la misma carpeta; y a resolve.extensions le pasamos el array [.js, .css]; si hacemos un import sin especificar la extension del archivo, como a continuacion:

import file from "./../folder/sayHi";

Webpack nos importará el archivo sayHi.js, dada la configuración de mi ejemplo.

Rodrigo Andre Gutierrez

si tu teclado tiene la tecla de la A chiquita ª al lado del número 1 entonces esa es la de la barra invertida \ ( AltGr + ª )

Recursos

Resumen

webpack.config.js con plugins esenciales

Progreso del curso

Introduccion

Webpack

Parcel

ESBuild

Rollup

Vite

Conclusiones