• 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 y test2. Pero, ¿qué ocurre si no utilizamos uno de ellos, por ejemplo test2?.
  • 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 con require 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 lanzar npm run build.
  • Vamos a decirle con webpack --watch que vigile las dependencias añadiendo a nuestro package.json un nuevo script llamado watch 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.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Webpack en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬