Qué es Webpack, para qué sirve y cómo utilizarlo

Author
By Darío Rivera
Posted on 2020-09-29 in Webpack

Webpack es un empaquetador de módulos para aplicaciones modernas en JavaScript. Qué significa esto ?, bueno, muchas cosas. En síntesis webpack convierte módulos con dependencias en archivos que pueda entender el navegador de una manera más rápida e interoperable. Antes de desglosar un poco más esta definición observemos el siguiente diagrama.

diagrama webpack

Para el desarrollador es mucho más cómodo trabajar con archivos separados y con un diseño arquitectónico modular. Cómo ves en el diagrama anterior, es común que una aplicación web contenga archivos css en plano, archivos de preprocesadores como Saas o Less, archivos en TypeScript, entre otros. Webpack nos ayudará a transpilar todos estos archivos y entregarlos al navegador para que este los entienda.

Por otro lado en una aplicación web también hay que tener en cuenta el perfomance, para esto Webpack podrá generar una versión minificada y/o ofuscada apta para el sistema de producción. Ahora bien, como sabes los navegadores a veces pueden tardarse en implementar las últimas funcionalidades en las especificaciones de JavaScript y CSS. Pues Webpack, también nos ayudará a transformar ese código moderno en código que puedan leer los distintos navegadores.

Instalación

Si llegaste hasta aquí probablemente ya tengas instalado Node.js en tu máquina y algún proyecto en el cuál quieras implementar Webpack. Si no es así, o quieres aprender de igual forma cómo se instalar puedes crear un proyecto nuevo en Node con el siguiente comando:

npm init

Después de configurar tu proyecto puedes instalar webpack con el siguiente comando.

npm i webpack --save-dev

Desde la versión 4 de Webpack muchas cosas se hacen más eficientes desde la consola, es por esto, que vamos a instalar también la siguiente depedencia.

npm i webpack-cli --save-dev

Una vez hecho esto ya puedes verificar la versión que instalaste de la siguiente forma:

# npx webpack -v
4.44.2

Integración

Bien, estamos a un solo paso de tener Webpack en nuestro proyecto. Para hacer esto interesante, vamos a crear el siguiente archivo HTML (index.html) en la raíz del proyecto.

<!DOCTYPE html>
<html>
<head>
    <title>My page</title>
</head>
<script type="text/javascript" src="app.js"></script>
<body></body>
</html>

También, vamos a crearun archivo JavaScript (main.js) en la raíz del proyecto.

window.onload = function() {
   document.querySelector('body').innerHTML = '<h1>Hello World!</h1>';
}

Notaste que el archivo que creamos se llama main.js y el que está en el HTML es app.js ?. Pues bien, app.js será nuestro archivo de producción el cuál generaremos así:

npx webpack --entry ./main.js --output ./app.js --mode production

Obtendrás una salida similar a la siguiente:

Hash: 494c204095c37670cbd9
Version: webpack 4.44.2
Time: 592ms
Built at: 09/28/2020 9:11:44 PM
 Asset        Size  Chunks             Chunk Names
app.js  1020 bytes       0  [emitted]  null
Entrypoint null = app.js
[0] ./main.js 99 bytes {0} [built]

Una vez hecho esto puedes entrar al index.html y ver el resultado en el navegador. Si deseas generar una versión de desarrollo basta cambiar el modo así

npx webpack --entry ./main.js --output ./app.js --mode development

Configuración

Cómo te diste cuenta anteriormente puede parecer un poco largo ejecutar el comando para generar los assets del proyecto. Es por esta razón que Webpack acepta un archivo de configuración llamado webpack.config.js con el cual podemos llegar al mismo resultado.

const path = require('path');

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

Con esto solo basta ejecutar el siguiente comando en la consola y obtendríamos el mismo resultado.

npx webpack --mode production

Ahora bien, podríamos ir un poco más allá y faciliar la ejecución de estos comandos aún más agregando dos scripts al archivo package.json.

"scripts": {
  "prod": "webpack --mode production",
  "dev": "webpack --mode development"
},

Finalmente, es cuestión de correr el siguiente comando si se requiere generar los assets para desarrollo.

npm run dev

Si te ha gustado este artículo puedes invitarme a tomar una taza de café


Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.