Webpack dependency graph & modo watch
Introducción
Conceptos esenciales
Uso práctico
- Ahora que has visto (un mínimamente) Webpack en acción, es hora tratar un concepto que están en su ADN: el gráfico de dependencias o dependency graph.
- Webpack va interpretar el proyecto desde el punto (o puntos) de entrada y buscando
import
,require
o cualquier otro indicio de que un archivo depende de otro. - Entonces, marcará esos paths como dependencias y también las recorrerá de forma recursiva creando bundles (la mayoría de las veces uno) **con ellos. Así sucesivamente.
- Vamos a crear varios módulos JavaScript y a importarlos en nuestro punto de entrada.
// test1.js
export default "Hello world";
//test2.js
export default "I love Webpack 🔥";
- Al importarlos en
index.js
y hacer uso de ellos, verás como aparecen en el bundle final.
import test1 from "./test1";
import test2 from "./test2";
console.log(`${test1}, ${test2}`);
- Al examinar el bundle final, ahí esta el contenido de
test1
ytest2
. Pero, ¿qué ocurre si no utilizamos uno de ellos, por ejemplotest2
?. - Podemos probar que funciona haciendo
node bundle.js
. - Como ya sabes Webpack analiza las sentencias que importan módulos y hace lo que puede para detectar qué es lo que se utiliza y lo que no. En este caso ve claramente que aunque hemos importado
test2
nadie está haciendo uso de él y esta es la clave: nada ni nadie tiene una referencia hace este módulo, con lo cual no se añade al gráfico de dependencias. - Este proceso es conocido como tree shaking (sacudida de árbol) y permite a Webpack compilar un bundle con lo que realmente está en uso.
- Importante, esto no es una concatenación de código fuente como con cualquier otro task runner, aquí hay una inteligencia que discrimina qué se utiliza y lo que no.
- El tree shaking sólo funciona con
imports
, no conrequire
ya que estos son dinámicos y Webpack no puede averiguar si se usarán o no. - Las ventajas son obvias: el usuario se descarga sólo lo que va a utilizar. Aunque en una lección posterior veremos con detenimiento qué es esto de three shaking.
- Antes de finalizar esta lección veamos qué es el modo
watch
de Webpack. En un workflow moderno de desarrollo no tiene cabida tener que acceder al termina cada vez y lanzarnpm run build
. - Vamos a decirle con
webpack --watch
que vigile las dependencias añadiendo a nuestropackage.json
un nuevo script llamadowatch
que contenga ese comando. - Puedes asociar más módulos a tu gráfico de dependencias simplemente añadiendo una referencia y verás como on the fly Webpack lo actualiza.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Aprende Webpack desde cero?
Resuelve todas tus dudas sobre Webpack en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.