Activos en Webpack
En cada proyecto hay algunos recursos o activos (assets). Estos activos representan imágenes, archivos de fuentes y cosas similares.
Por lo general, simplemente queremos transferir recursos desde la carpeta del proyecto a la carpeta de construcción. Pero nuevamente surge el problema con el caché. Por ejemplo, el navegador almacena en caché las imágenes. Esto significa que si cambiamos la imagen, sin cambiar el nombre de su archivo, los usuarios del sitio verán la versión anterior de la imagen, ya que se les habrá almacenado en caché.
La solución al problema, como ya saben, es agregar un hash al nombre del archivo. Webpack permite copiar archivos de recursos a la carpeta de construcción, agregando hashes a ellos y, lo más importante, cambiando en todos los archivos las rutas a estos recursos por nuevas.
En Webpack, el trabajo con activos se realiza
utilizando módulos especiales de activos (assets).
Hay cuatro tipos: asset/resource,
asset/inline, asset/source,
asset.
El módulo asset/resource copia archivos
desde la carpeta del proyecto a la carpeta de construcción y reemplaza
las rutas a ellos por nuevas.
El módulo asset/inline toma archivos
desde la carpeta del proyecto y en el código de construcción
reemplaza las rutas a los archivos por base64.
El módulo asset/source toma archivos
desde la carpeta del proyecto y los devuelve
en forma de cadena de texto.
El módulo asset elige por sí mismo, copiar
el archivo a la carpeta de construcción o transformarlo
a base64. La elección se realiza dependiendo
del tamaño del archivo. Por defecto, los archivos
de más de 8kb se convierten en archivos.
El esquema general de aplicación de estos módulos se ve de la siguiente manera:
module: {
rules: [
{
test: /\.png$/, // archivos
type: 'asset/resource' // tipo de módulo
}
]
},
Explica qué se entiende por activos.
Busca en Google qué es base64 y cómo se usa en CSS.
Enumera los 4 tipos de módulos para activos.
Explica para qué está destinado
cada uno de los 4 tipos de módulos.
