Webpack dependency graph & modo watch

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