¿Qué es Webpack?

6 min readApr 13, 2023

1. ¿Webpack?

Webpack es un empaquetador de módulos (Module Bundler) que se utiliza ampliamente en los marcos de desarrollo frontend más modernos. Esta herramienta permite la combinación y fusión de recursos de una aplicación web, como HTML, CSS, Javascript, imágenes y otros, en un único archivo resultante. A continuación, se analizarán más detalladamente los conceptos de módulo y empaquetado de módulos.

¿Qué es un módulo?

Un módulo es una pequeña unidad de código con una funcionalidad específica desde el punto de vista de la programación. En Javascript, un módulo podría ser el siguiente código:

// math.js
function sum(a, b) {
  return a + b;
}

function substract(a, b) {
  return a - b;
}

const pi = 3.14;

export { sum, substract, pi }

Este archivo math.js es un módulo que contiene tres funciones:

Una función sum() que suma dos números
Una función substract() que resta dos números
Una constante pi que representa el valor de Pi

Agrupando funciones similares en un archivo con un propósito claro, se crea un módulo.

Módulos en Webpack

El concepto de módulo en Webpack no se limita a los módulos de Javascript, sino que abarca todos los recursos que componen una aplicación web. Esto incluye archivos HTML, CSS, Javascript, imágenes, fuentes y otros. Cada uno de estos archivos se considera un módulo.

¿Qué es el empaquetado de módulos?

El empaquetado de módulos es el proceso de combinar y comprimir docenas o incluso cientos de recursos de una aplicación web en un solo archivo. Webpack facilita este proceso, asegurando que todos los módulos y recursos necesarios se combinen de manera eficiente y efectiva.

2. ¿Por qué es necesario Webpack?

Webpack es necesario en el desarrollo de aplicaciones web modernas por varias razones, que se explican con más detalle a continuación:

Problema del alcance de variables en JavaScript: En el desarrollo de aplicaciones web, puede haber conflictos en el alcance de las variables cuando diferentes scripts utilizan nombres de variables similares. Webpack soluciona este problema implementando módulos que encapsulan el código y evitan conflictos en el alcance de las variables. Al utilizar la sintaxis de módulos de ES6 y el empaquetado de módulos de Webpack, se garantiza que cada módulo tenga su propio alcance, lo que evita problemas de colisión de nombres.
Restricciones en la cantidad de solicitudes HTTP por navegador: Cada navegador puede manejar un número limitado de solicitudes HTTP simultáneas. Si una aplicación web contiene muchos archivos, como scripts, imágenes y hojas de estilo, se requieren varias solicitudes HTTP para cargar todos estos recursos. Sin embargo, al combinar y empaquetar estos recursos en un solo archivo con Webpack, se reduce la cantidad de solicitudes HTTP necesarias, lo que mejora el rendimiento y la velocidad de carga de la aplicación web.
Gestión de código no utilizado: Con el tiempo, las aplicaciones web pueden acumular código no utilizado o redundante. Webpack ayuda a identificar y eliminar este código innecesario a través del proceso de “tree-shaking” (sacudida de árbol), lo que mejora la eficiencia y el rendimiento de la aplicación.
Soporte para carga dinámica y carga perezosa (Dynamic Loading & Lazy Loading): La carga dinámica permite cargar módulos solo cuando se necesitan, en lugar de cargar todos los módulos de una vez al inicio. La carga perezosa es una técnica que carga recursos solo cuando se requieren, lo que puede mejorar el rendimiento de la aplicación al reducir la cantidad de datos que se deben cargar inicialmente. Webpack proporciona soporte para ambas técnicas mediante la función de división de código (Code Splitting), lo que permite cargar módulos y recursos de manera más eficiente y en el momento adecuado.

Estas son solo algunas de las razones por las que Webpack se ha vuelto una herramienta esencial en el desarrollo de aplicaciones web modernas. Al abordar estos problemas y proporcionar soluciones eficientes, Webpack mejora la calidad, el rendimiento y la escalabilidad de las aplicaciones web.

3. Las 4 propiedades principales de Webpack

Para comprender el proceso de construcción (conversión de archivos) de Webpack, debes conocer las siguientes 4 propiedades principales:

entrada (entry)
salida (output)
cargador (loader)
complemento (plugin)

Vamos a analizar en detalle cada una de estas propiedades principales.

Entry

La propiedad de ‘entrada’ (entry) es el punto de entrada inicial necesario para que Webpack transforme los recursos web y se refiere a la ruta del archivo JavaScript.

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

Este código indica que cuando se ejecute Webpack, realizará la construcción en el archivo index.js que se encuentra en la carpeta src.

El archivo de entrada debe contener la estructura y el contenido generales de la aplicación web. Webpack utiliza este archivo para comprender y analizar las relaciones entre los módulos utilizados en la aplicación, por lo que debe contener la información necesaria para que la aplicación funcione.

Por ejemplo, si estás construyendo un servicio de blog con Webpack, el código podría verse así:

// index.js
import LoginView from './LoginView.js';
import HomeView from './HomeView.js';
import PostView from './PostView.js';

function initApp() {
  LoginView.init();
  HomeView.init();
  PostView.init();
}

initApp();

Este código supone que el servicio es una aplicación de una sola página (SPA). Incluye la pantalla de inicio de sesión, la pantalla principal después del inicio de sesión y la pantalla de creación de publicaciones, todas requeridas para el servicio web y cargadas desde el archivo ‘index.js’. Webpack compilará los archivos basándose en su contenido.

Los puntos de entrada pueden ser múltiples, como se muestra a continuación:

entry: {
  login: './src/LoginView.js',
  main: './src/MainView.js'
}

Dividir los puntos de entrada de esta manera es adecuado para aplicaciones multipágina que reciben información del servidor cuando se accede a una página específica, en lugar de aplicaciones de una sola página.

Output

La propiedad ‘output’ indica la ruta del archivo resultante después de ejecutar Webpack.

// webpack.config.js
module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

A diferencia de las propiedades ‘entry’ y ‘output’, se utiliza el nombre ‘module’ y se deben agregar opciones en forma de objeto.

Loader

La propiedad ‘loader’ permite que Webpack transforme recursos que no son archivos JavaScript (HTML, CSS, imágenes, fuentes, etc.) al interpretar la aplicación web.

// webpack.config.js
module.exports = {
  module: {
    rules: []
  }
}

Plugins

Los ‘plugins’ proporcionan funciones adicionales a las operaciones básicas de Webpack. A diferencia de los ‘loaders’, que se encargan de interpretar y transformar archivos, los ‘plugins’ modifican la forma del resultado.

Los ‘plugins’ se declaran de la siguiente manera:

// webpack.config.js
module.exports = {
  plugins: []
}

En el arreglo de ‘plugins’, solo se pueden agregar instancias de objetos creadas por funciones constructoras. Por ejemplo:

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.ProgressPlugin()
  ]
}

Estos dos ‘plugins’ realizan las siguientes funciones:

HtmlWebpackPlugin: crea un archivo HTML a partir del resultado compilado con Webpack.
ProgressPlugin: muestra el progreso de la compilación de Webpack.

Ejemplo

Ahora que conoces las cuatro propiedades principales de Webpack, echemos un vistazo a cómo se utilizan en conjunto en un ejemplo práctico.

Imagina que estás desarrollando una aplicación web que consta de una página de inicio de sesión, una página principal y una página para crear publicaciones. En este caso, podrías configurar tu archivo ‘webpack.config.js’ de la siguiente manera:

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};

En este ejemplo, la configuración de Webpack incluye lo siguiente:

Un punto de entrada en ‘src/index.js’.
La propiedad ‘output’ que especifica que el archivo resultante se llamará ‘bundle.js’ y se guardará en la carpeta ‘dist’.
Dos ‘loaders’ en la propiedad ‘module’. El primero para procesar archivos CSS y el segundo para procesar imágenes.
Dos ‘plugins’: ‘HtmlWebpackPlugin’ para generar un archivo HTML a partir del resultado compilado y ‘MiniCssExtractPlugin’ para extraer el CSS en archivos separados.

Con esta configuración, Webpack puede procesar y empaquetar correctamente los recursos de tu aplicación web, incluidos los archivos JavaScript, CSS e imágenes. Esto te permitirá mantener una estructura de proyecto limpia y optimizar la entrega de tu aplicación a los usuarios finales.