Recientemente me encontré trabajando en un proyecto basado en nestjs y una cosa que me sorprendió fue la cantidad de console.log distribuidos por todo el repositorio, señal de que el equipo lo usaba como su principal forma de depurar. Un poco old school para mí gusto para ser sincero, así que, ¿Por qué no usar vscode a tu favor? La siguiente configuración ademas de correr la app, enlaza el debugger al proceso node. En MacOS: Ejecutar > Agregar configuración... Listo, ya podemos poner breakpoints en donde lo requiramos, sencillo no? C you space cowboy!
Básicamente webpack ádemas de ayudarnos a empaquetar todos nuestros scripts (javascript) en un solo archivo (bundle) también nos permite incluir otro tipos de archivos (texto, imágenes, fonts, etc).
Lo cuál la convierte en una herramienta versátil y de paso nos simplifica la vida al incorporarla en nuestros proyectos.
Todo esto es posible gracias a 2 increíbles funcionalidades que webpack pone a nuestra disposición:
Asset Modules
Loaders
Modulos de Activos
Hoy vamos hablar un poco de los Asset Modules (Modulos de activos), que es una nueva funcionalidad introducida en webpack 5.
En versiones anteriores teníamos que instalar y configurar loaders adicionales (raw-loader, file-loader) para realizar la misma tarea; ahora los Modulos de activos han simplificado todo el proceso.
Lo único que tenemos que hacer es indicarle a webpack como importar dichos archivos, y sí, modificando nuestro webpack.config.js.
Dependiendo de la naturaleza del archivo(s) podemos usar alguno de 4 Modulos de Activos disponibles.
Tipos de Modulos de Activos
asset/resource
Este tipo de modulo de activos genera un archivo en el directorio donde se genera nuestro bundle y exporta la URL de dicho archivo, que podemos usar para hacer referencia al mismo dentro de nuestro código.
Generalmente usaremos este tipo de modulo de activos con archivos de tamaño considerable, ya que no sería muy buena idea incluirlos directament en el bundle.
asset/inline
Este tipo de modulo de activos embede los archivos dentro del bundle como un string codificado en Base 64 (data URI).
Podemos emplear este tipo de modulo con archivos pequeños (Kb o menos).
asset/general
Este tipo de modulo de activos es una combinación de los dos anteriores (inline/resource) y webpack decide cual usar dependiendo del tamaño de los archivos (assets).
Si el archivo es menor a 8Kb, webpack lo tratará como un asset/inline; Si el archivo es mayour a 8Kb, webpack lo tratará como un asset/resource.
También es posible cambiar esa configuración pero lo dejaremos para otro momento.
asset/source
Este tipo de modulo, no genera un archivo externo, lee el contenido del archivo y lo incluye directamente en nuestro bundle sin ninguna modificación.
Generalmente usaremos este tipo de modulo para agregar archivos que contengan data de inicialización o incluso como muestra.
Comentarios