Assets in Webpack
In ogni progetto ci sono alcune risorse o assets (assets). Questi assets sono immagini, file di font e cose simili.
Di norma, vogliamo semplicemente trasferire le risorse dalla cartella del progetto alla cartella di build. Ma sorge di nuovo il problema della cache. Ad esempio, il browser memorizza nella cache le immagini. Ciò significa che se modifichiamo un'immagine, senza cambiare il nome del file, gli utenti del sito vedranno la versione precedente dell'immagine, poiché è stata memorizzata nella cache.
La soluzione al problema, come già sapete, è aggiungere un hash al nome del file. Webpack consente di copiare i file delle risorse nella cartella di build, aggiungendo loro degli hash e, cosa più importante, modificando in tutti i file i percorsi verso queste risorse con quelli nuovi.
In Webpack il lavoro con gli assets viene effettuato
utilizzando speciali moduli assets.
Ci sono quattro tipi: asset/resource,
asset/inline, asset/source,
asset.
Il modulo asset/resource copia i file
dalla cartella del progetto alla cartella di build e sostituisce
i percorsi verso di essi con quelli nuovi.
Il modulo asset/inline prende i file
dalla cartella del progetto e nel codice del build
sostituisce i percorsi dei file con base64.
Il modulo asset/source prende i file
dalla cartella del progetto e li restituisce
sotto forma di stringa di testo.
Il modulo asset sceglie autonomamente se copiare
il file nella cartella di build o trasformarlo
in base. La scelta viene effettuata in base
alla dimensione del file. Per impostazione predefinita, i file
più grandi di 8kb vengono raccolti come file.
Lo schema generale di applicazione di questi moduli è il seguente:
module: {
rules: [
{
test: /\.png$/, // file
type: 'asset/resource' // tipo di modulo
}
]
},
Spiega cosa si intende per assets.
Cerca su Google cos'è il base64 e come viene utilizzato in CSS.
Elenca 4 tipi di moduli per gli assets.
Spiega a cosa serve
ciascuno dei 4 tipi di moduli.
