El desarrollo fronted ha sacado tantas herramientas en los últimos años que cuando instalamos las nuevas tecnologías como react o vite, instala tantas librerías que no sabemos que hace en el fondo.
Una de estas herramientas es Webpack, como backend developer no he interactuado mucho pero que todas las herramientas avanzadas utilizan. Hace poco en un curso de JS retomé este tema y quería compartirles de que trata y cómo podemos ver su ventaja. Claro que este post también sirve para mi propia documentación y memoria.
¿Qué es Webpack?
Webpack es un static module bundle, nos permite agrupar todos los archivos de nuestra aplicación en un árbol de dependencias. Si tenemos varios archivos JS en nuestro proyecto, cada uno con dependencias a los otros, incluso con librerías externas, webpack los procesa y los agrupa en un único archivo. Esto mejora significativamente el rendimiento de la página para el usuario. Webpack ofrece muchas más herramientas, pero este post tiene como finalidad usar esta librería con la mínima configuración posible para serlo más entendible.
Antes de Webpack
Lo primero. Corramos el inicialador de node:
npm i
Nos aparecerá un archivo llamado package.json. Ahora creamos los siguientes archivos:
./index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" ></script>
<script src="src/bar.js"></script>
<script src="src/index.js"></script>
</body>
</html>
./src/index.js
bar();
./src/bar.js
function bar() {
console.log('My Bar');
const array = _.compact([0, 1, false, 2, '', 3]);
console.log(array);
}
Si abrimos el archivo index.html en un navegador, la consola nos aparece un mensaje como este:

Nada mal, un archivo html que tiene que hacer import con las etiquetas script. Los archivos quedan fuertemente dependientes al html, lo cual puede complicar su manejo y mantenimiento a largo plazo. Además, cada cambio en uno de los archivos de script requiere una modificación correspondiente en el archivo html, aumentando el riesgo de errores y problemas de compatibilidad entre diferentes elementos del sitio web.
Repositorio: https://github.com/arturoverbel/blog_without_webpack
Después de Webpack
Ahora vamos a instalar webpack siguiendo estos comandos:
npm i webpack webpack-cli
webpack
es nuestro module bundler con todas las funciones, webpack-cli
será la librería que nos ayudará a correr comandos por consola. Ahora editamos los archivos JS:
./src/index.js
import bar from './bar.js';
bar();
./src/bar.js
var _ = require('lodash');
export default function bar() {
const array = _.compact([0, 1, false, 2, '', 3]);
console.log(array);
}
Los archivos, ahora tienen una pita diferente, es claro sus dependencias con otros archivos y totalmente modulares. Llegó la hora de encender el webpack, pero antes, vamos a configurar nuestro webpack antes de ejecutarlo. Creamos un archivo:
./webpack.config.js
const path = require('path');
const config = {
entry: './src/index.js',
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
module.exports = config;
Algunos datos que resaltar del archivo de configuracion de webpack:
- entry: Indicamos el archivo desde donde Webpack va a realizar el bundler, todas las dependencias que se van a empaquetar en un solo archivo, van a empezar desde aquí. En este caso, el archivo bar.js y la librería lodash.
- output: La salida resultante. El path y el filename que se llamará bundle.js.
Ahora sí, corremos el siguiente comando:
npx webpack
Recordemos que npx es una sentencia de node que nos permite ejecutar scripts de librerías instaladas en local. Deberia aparecer un mensaje como:
asset bundle.js 554 KiB [emitted] (name: main)
…
webpack 5.93.0 compiled successfully in 114 ms
Nos indica que ya empaquetó toda la lógica de los script en un archivo único ubicado en ./dist/bundle.js, ahora editamos nuestro archivo html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
Si abrimos nuestro archivo html en un navegador, podemos observar que funciona igual (no se nota pero ahora es más rápido) que el anterior.
Repositorio: https://github.com/arturoverbel/blog_with_webpack
Conclusiones
Webpack nos ayuda a mejorar nuestro script para la entrega del usuario. Nuestra app tendrá un mejor performance si se agrupa toda su lógica en un único archivo. Ahora mismo webpack está empaquetando toda la librería de lodash. Pero existen maneras de solo empaquetar las funciones que utilizamos, si cargammos el paquete de esta manera:
import { compact } from 'lodash';
export default function bar() {
const array = compact([0, 1, false, 2, '', 3]);
console.log(array);
}
Webpack tiene muchas más configuraciones para hacer la web mucho más rápido para el usuario, pero este post pretendía hacer un primer acercamiento a la librería.
Este post está basado en la página oficial de Webpack: https://webpack.js.org/guides/getting-started/. Hasta ahora, la mejor documentación para iniciar que he podido encontrar.
Repositorios:
- App web usando Webpack: https://github.com/arturoverbel/blog_with_webpack
- App web sin usar Webpack: https://github.com/arturoverbel/blog_without_webpack