Webpack esencial

¿Qué es un "bundle"?

• Un bundle es el resultado de los distintos módulos y dependencias de una aplicación (JavasCript, CSS, imágenes, recursos, etc) tras pasar por la fase de compilación de Webpack.
   
• Webpack puede dividir el bundle principal en varios bundles relacionados por contexto, temática o naturaleza y cargarlos de forma asíncrona cuando se necesiten. Proceso conocido como bundle splitting y lazy loading, respectivamente.

Fuente: Webpack glossary.

Webpack esencial

¿Qué es el "dependency graph"?

• Partiendo del punto (o puntos) de entrada Webpack busca las dependencias entre documentos, de forma recursiva, construyendo al final un gráfico o mapa de las interdependencias entre los módulos y recursos de la aplicación.

Fuente: Webpack glossary.

Webpack esencial

¿Qué es un "loader"?

• Un loader pre-procesa nuestro código fuente y lo devuelve transformado de alguna forma. Se trata de una característica super poderosa de Webpack que nos permite crear un workflow de desarrollo a la carta.
   
• Por ejemplo, podemos transpilar JavaScript, procesar SASS, interpretar CSS como módulos o extraer imágenes y convertirlas en Base64, por citar unos pocos.

Fuente: Webpack glossary.

Webpack esencial

¿Qué es un "plugin"?

• Un plugin puede hacer todo lo que no puede hacer un loader. Los loaders tienen sus limitaciones, siendo la más obvia que sólo pueden transformar recursos o dependencias que se van a añadir al dependency graph.
   
• Hay otras tareas que extienden Webpack a través de plugins, como minificar HTML, descartar CSS sin usar o generar source maps. Entre otros.

Fuente: Webpack glossary.

Webpack esencial

¿Qué es "Hot Module Replacement"?

• HMR es como tener Live Reload para cada módulo de forma independiente, no sólo para la aplicación en conjunto.
   
• Cuando se reciben actualizaciones, estas se aplican únicamente a las partes (módulos en este caso) que han cambiado en lugar de lanzar un full refresh.
   
• Esto permite conservar el estado de la aplicación y acelerar el proceso de desarrollo.

Fuente: Webpack glossary.

Webpack esencial

¿Qué es un "chunk"?

• Un chunk o "pedazo" permite a Webpack dividir el bundle o bundles finales  en trozos relacionados por dependencias comunes, tamaño, etc.
   
• Los chunks son parte imprescindible de técnicas como de división de código o "code splitting" que permiten cargar bajo demanda diferentes partes de nuestra aplicación y reducir el tamaño del bundle principal.

Fuente: Webpack glossary.

Webpack esencial

¿Qué es "tree shaking"?

• Tree Shaking es un termino (piensa en las hojas de un árbol) que identifica la acción de eliminar el código que no estás utilizando o "dead code" en tu aplicación.
   
• Para Webpack "dead code" es todo el código que no te ve utilizar. Por ejemplo objetos import sin utilizar, librerías sin implementar, etc.
   
• En ocasiones Webpack no sabe determinar qué código esta muerto, por lo que debemos ser explícitos e indicárselo.

Fuente: Webpack glossary.