Webpack es una herramienta para empaquetar y exportar los archivos que componen una aplicación web y todas sus dependencias.
Webpack es una herramienta que sirve para gestionar todos los archivos que componen una aplicación web (código JavaScript/Typescript, CSS, imágenes, etc) y preparalos para que puedan ser empaquetados y distribuidos hacia los usuarios que en definitiva usarán la aplicación.
Existen alternativas o herramientas que quieren ocupar el espacio de Webpack, como Vite, Bun, Rollup.js, Parcel, etc, y eso es debido a que Webpack tiene algunos puntos menos brillantes, como que la curva de aprendizaje es algo más complicada a medida que queramos hacer cosas más complejas, el rendimiento en ciertos escenarios es menor que otras herramientas, y históricamente los cambios de versión de Webpack introducían cambios no compatibles con versiones anteriores (lo que se conoce como Breaking changes).
Sin embargo, Webpack sigue siendo el bundler más completo que soporta una gran cantidad de escenarios, y es un valor seguro para crear aplicaciones grandes.
Para crear un proyecto que use Webpack, podemos crear un directorio e instalar las dependencias:
mkdir webpackcd webpacknpm init -ynpm install webpack webpack-cli --save-dev
webpack-cli
es un conjunto de comandos para gestionar Webpack desde la línea de comandos. Se creará un archivo package.json
y package-lock.json
.
En el archivo package.json
podemos eliminar la entrada "main": "index.js"
y podemos definir que lea módulos JavaScript para que entienda los archivos de ES6 añadiendo la propiedad type
:
... "name": "webpack", "version": "1.0.0", "description": "", "type": "module",...
Ahora añadiremos algo de código para poder mostrar cómo funciona Webpack. Esta es la estructura de directorios:
webpack /src |- index.html |- index.js |- package.json |- package-lock.json |- webpack.config.js
Creamos un archivo JavaScript con una mínima funcionalidad:
function component() { const element = document.createElement('div');
element.innerHTML = 'Bienvenido!'
return element;}
document.body.appendChild(component());
También creamos un archivo index.html
con el siguiente contenido:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Mi app</title> </head> <body> <script src="./src/index.js"></script> </body></html>
Finalmente añadimos un archivo de configuración mínimo webpack.config.js
. Escribimos el modo development
, este campo debería variar cuando estemos en el entorno de producción, por ejemplo con variables de entorno.
export default { plugins: [], mode: 'development'};
Ahora ya podemos ejecutar este comando para generar los archivos de distribución:
npx webpack
El resultado será similar a esto:
asset main.js 2.21 KiB [emitted] (name: main)runtime modules 274 bytes 1 module./src/index.js 171 bytes [built] [code generated]webpack 5.97.1 compiled successfully in 72 ms
Por defecto se habrá creado un directorio dist
en la raíz del directorio con todo el contenido del código JavaScript. En este ejemplo main.js
es el único archivo creado que la app usará.
Si te preguntas por qué sólo sale el archivo JavaScript en la carpeta dist
y no el index.html
que también creamos, es porqué la configuración por defecto sólo trata con los archivos JS. Si queremos empaquetar otros tipos de archiivos como HTML, necesitamos usar plugins.
Si queremos que aparezca el index.html
dentro del directorio dist
tenemos que instalar unn plugin llamado html-webpack-plugin
:
npm install html-webpack-plugin --save-dev
Y configurarlo en el archivo de configuración de Webpack:
import HtmlWebpackPlugin from 'html-webpack-plugin'
export default { plugins: [ new HtmlWebpackPlugin({ hash: true, template: './src/index.html', filename: 'index.html', inject: 'body' }) ], mode: 'development'};
Si volvemos a ejecutar npx webpack
, veremos que se ha generado un archivo index.html
que carga el archivo main.js
.
En el archivo package.json
, podemos añadir nuevos scripts para no tener que usar npx webpack
:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode production"},
Ahora desde la línea de comandos ya podemos ejecutar npm run build
.
Mientras trabajamos en nuestro proyecto en local, nos puede interesar tener un servidor abierto y que automáticamente se vayan empaquetando las versiones para poder ver los cambios en tiempo real en el navegador, en vez de tener que ejecutar a mano el script de build definido anteriormente.
Para ello podemos instalar otro plugin webpack-dev-server
que trae la funcionalidad de hot reload
que precisamente significa que cada vez que haya un cambio en el código se genere una nueva versión. Instalamos la dependencia:
npm install webpack-dev-server --save-dev
Modificamos el archivo de configuración de Webpack para añadir la propiedad de devServer
import HtmlWebpackPlugin from 'html-webpack-plugin'
export default { plugins: [ new HtmlWebpackPlugin({ hash: true, template: './src/index.html', filename: 'index.html', inject: 'body' }) ], mode: 'development', devServer: { static: './dist', open: true }};
Y añadimos un nuevo script dev
npm en el archivo package.json
:
... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode production", "dev": "webpack serve --mode development" },...
Si ahora ejecutamos:
npm run dev
Se iniciará un servidor web y se abrirá el navegador automáticamente abriendo la página web en la ruta localhost:8080
.
Con este tutorial hemos cubierto lo más básico de Webpack para crear un ejemplo para el empaquetado de una aplicación web. Ahora puedes ampliar las funcionalidades, por ejemplo, añadiendo CSS, o optimizando imágenes. Hay muchas posibilidades, Webpack es muy potente. Puedes ver la documentación oficial para consultar más opciones.