Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

WEBPACK: ¿QUÉ ES? [Actualizado 2019]

Pablo Fernandez
WEBPACK: ¿QUÉ ES? [Actualizado 2019]
El reproductor de video será cargado en breves instantes.

Qué es Webpack y cómo funciona

WebPack es básicamente un empaquetador de módulos o module bundler, pero gracias a un de sus componentes, los plugins, puede hacer las veces de tasks runner, es decir podemos hacer tareas de todo tipo, como mover directorios, hacer clean up, etc.

Para entender que es Webpack vamos a analizar un poco este gráfico.

que es webpack

En aplicaciones web, comúnmente, tenemos muchos módulos con dependencias.

Podemos tener, por ejemplo, un módulo JS que vaya a depender de otros módulos .js, que tenga imágenes en diferentes formatos, como JPG o PNG. Podemos tener ficheros CSS o estar utilizando algún preprocesador de CSS, como puede ser SASS, Less o Stylus. Al final tenemos muchos de estos módulos y una serie de dependencias para cada módulo.

Webpack se encarga de coger todos estos módulos y los transforma a assets que puede entender el navegador, como por ejemplo archivos JS, CSS, imágenes, videos, etc.

Todo este proceso de empaquetado es de lo que realmente se encarga Webpack.

Sistema de módulos

Cuando hablamos de módulos tenemos que entender también qué sistemas de módulos se utilizan. En el navegador no existía ningún sistema de módulos predefinido, había que usar alguna especificación de módulos, de los que existían diferentes.

Dependiendo de la que se usara había que utilizar una librería específica, que se encargase de transformar esos módulos a algo que finalmente el navegador pudiese entender.

Los más comunes son:

  • AMD, que es una definición de módulos asíncrona.
  • CommonJS, es la que utiliza NodeJS.
  • ES2015.

Un ejemplo de cómo se define un módulo en AMD es el siguiente:


// In mymodule.js
define(‘myModule’, [‘dep1’, ‘dep2’], (dep1, dep2) => {
return function () {}
})
// In app.js
define(‘app’, [‘myModule’], myModule => {
// stuff…
});

Se definen unos módulos, que tienen unas dependencias, que se van a cargar asíncronamente, y más adelante requerimos ese módulo que acabamos de crear.

Un ejemplo de cómo se define un módulo en CommonJS es el siguiente:


// In mymodule.js
exports.calc = (a, b) => a + b;
// In app.js
const myModule = require(‘/path/to/myModule’);
console.log(myModule.calc(1, 2));

Aquí exportamos una serie de módulos y después los requerimos. En ES2015 la forma de definir un módulo es la siguiente:


// In mymodule.js
exports const calc = (a, b) => a + b;
// In app.js
import { calc } from ‘/path/to/myModule’;
console.log(calc(1, 2));

Aquí importamos una función, calc en este caso, después la importamos y la podemos usar. Estos sistemas de módulos, de los que existen muchos, ya que en aplicaciones web cada proyecto utilizaba el suyo según el que quisiesen implementar, están todos soportados en Webpack, por lo que podemos utilizar cualquiera o hacer una mezcla de varios para desarrollar nuestras aplicaciones.

Si quieres aprender en profundizar sobre Webpack puedes hacer el Curso de Webpack básico en el que aprenderás qué es Webpack y cómo utilizarlo en tus proyectos.

curso-webpack-basico

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Programador JavaScript Profesional

Programador JavaScript Profesional

carrera

Incluye 8 cursos:

  • Curso de JavaScript Profesional
  • Curso de Angular 4
  • Curso de React JS

y 5 cursos más!

Duración: 47 horas y 58 minutos

Curso de JavaScript Profesional

Curso de JavaScript Profesional

curso

Con este curso aprenderás:

  • Historia, propósito y principios básicos de JavaScript.
  • Entorno, navegadores y dispositivos
  • Runtimes, Scope, Event Loop, Garbage Collector

Duración: 9 horas y 37 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars