Gli asset/resource di Webpack

Esistono potenti funzionalità di webpack per importare file di risorse nel codice Javascript, questi sono principalmente gli “assets moduls” e i “loader”. Per file di risorse si intendono diversi tipi di file come immagini, font o file di testo semplice. Webpack è in grado di elaborare qualsiasi tipi di file attraverso i “assets modules”. Esistono quattro tipi di moduli di risorse che è possibile utilizzare. “asset/resource”, “asset/inline”, “asset”, “asset/source” in questo primo articolo vedremo come funziona “asset/resource” seguiranno ulteriori articoli per gli altri tipi di moduli.

Il modulo di asset denominato “asset/resource” rappresenta una risorsa fondamentale quando si tratta di importare immagini di notevoli dimensioni o file di font di dimensioni considerevoli. La sua funzionalità principale consiste nel copiare integralmente il file di risorsa nella cartella di output del progetto. In questo modo, durante la compilazione del progetto, il modulo assicura che la risorsa, come ad esempio un’immagine di grandi dimensioni o un file di font, venga inclusa nella directory di destinazione senza alcuna manipolazione o ridimensionamento. Ciò è particolarmente utile quando è necessario mantenere la qualità e l’integrità della risorsa originale all’interno dell’applicazione.

In questo articolo, useremo come base per gli esempi di codice un’applicazione già realizzata in un articolo precedente intitolato “Prima applicazione Webpack”. Aggiungeremo il codice di esempio di questo articolo a quell’applicazione esistente. Si presume quindi, nelle righe seguenti, di avere già a disposizione un’applicazione di base molto semplice.

Webpack ha abilitato l’importazione diretta di immagini nel codice JavaScript. Per dimostrare l’utilizzo di questa funzionalità, creeremo una funzione JavaScript nel nostro progetto di esempio chiamata “imgImportTest”. Questa nuova funzione verrà definita in un file separato denominato “img-import-test.js”.

import sampleImage from './img/sample-image.png';

function imgImportTest() {
 const imgElement = document.createElement('img');
 imgElement.src = sampleImage;
 const body = document.querySelector('body');
 body.appendChild(imgElement);
}

export default imgImportTest;

All’interno di questa funzione, l’operazione principale è la creazione di un nuovo elemento di tipo “img” attraverso il quale verrà visualizzata l’immagine. Alla proprietà “src” di questo elemento associo l’immagine denominata “sampleImage”, precedentemente importata nello script. Infine, la funzione viene esportata, consentendo il suo utilizzo in altri file JavaScript del progetto.

A tal proposito vado nel file index del nostro progetto di riferimento e importo la nuova funzione in modo da utilizzarla subito dopo la funzione “shoppingList” che abbiamo sviluppato nell’articolo precedente, in questo modo:

import shoppingList from './shopping-list.js';
import imgImportTest from './img-import-test.js';

shoppingList();
imgImportTest();

Nel contesto di Webpack, è necessario istruire esplicitamente il processo di importazione di immagini. Questo richiede l’aggiunta di una regola specifica al file di configurazione di Webpack. Nel file di configurazione “webpack.config.js”, andremo a definire un proprietà “module” e all’interno di questa, la proprietà “rules”, si tratta di un array di regole conterrà oggetti, ognuno di questi oggetto deve avere almeno due proprietà fondamentali: “test” e “type”.

La proprietà “test” è definita da un’espressione regolare che corrisponderà ai file con estensione .png o .jpg. La proprietà “type” indicherà il tipo di caricamento del modulo, e in questo caso, useremo “asset/resource”.

La logica dietro questa configurazione è che quando si tenta di importare un file .png o .jpg, Webpack verificherà se è definita una regola appropriata. In caso contrario, genererà un errore, indicando che non sa come gestire il file importato. D’altra parte, se trova una regola corrispondente, importerà il file in base a tale regola. Nel nostro esempio, aggiungeremo solo una regola per illustrare il concetto, ma in un progetto più complesso potrebbero essere presenti diverse regole per vari tipi di file.

otteniamo quindi il seguente risultato:

// webpack.config.js

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
   filename: 'bundle.js',
   path: path.resolve(__dirname, 'dist'),   
   publicPath: 'dist/'
 },
 mode: 'none',
 module: {
   roles: [
     {
       test: /\.(png|jpg)$/,
       type: 'asset/resource'
     }
   ]
 }
};

Quando si importa un file, Webpack cerca di determinare come gestirlo. Prendiamo ad esempio il caso in cui devo importare un file chiamato “sample-image.png”. Per alcuni tipi di file, come i file JavaScript o i file JSON, Webpack sa già come importarli senza specificare ulteriori regole.

Tuttavia, per tipi di file diversi, come nel nostro caso i file PNG, Webpack deve valutare le regole definite nella configurazione. Webpack analizza le regole una per una, quando individua una regola la cui espressione regolare definita nella proprietà “test” è valida, applica quella specifica regola. In questo modo, Webpack è in grado di gestire diversi tipi di file in base alle regole specificate nella configurazione.

Ora, in base a questa regola da noi definita, dobbiamo utilizzare il tipo di modulo “asset/resource” per importare il file. Ciò indica a Webpack di copiare il file richiesto nella directory di output. Per impostazione predefinita, il nome del file risultante sarà un hash del contenuto del file con l’estensione originale.

Prima di procedere alla compilazione del progetto per visualizzare il risultato finale, è importante discutere della proprietà “publicPath” definita nell’oggetto “output” nel nostro file di configurazione. Se non specifichiamo questa proprietà, Webpack, durante la compilazione, assegnerà alla nostra immagine sulla pagina HTML un percorso assoluto, facendo riferimento al file presente sul disco della macchina di sviluppo. Questo comportamento, ovviamente, renderebbe la pagina inutilizzabile in un ambiente di produzione.

Per ovviare a questo problema, specifico il valore “dist/” per la proprietà “publicPath”. Questo valore rappresenta il nome della cartella di distribuzione in cui è contenuto anche il mio file PNG. La conseguenza sarà che, al termine della compilazione, Webpack assegnerà all’immagine sulla pagina HTML finale un percorso relativo, composto da “dist/” seguito dal nome del file dell’immagine. Questo assicura che il percorso sia corretto sia in ambiente di sviluppo che in produzione.

Ora siamo pronti per compilare il progetto. eseguiamo:

npm run build

se visualizziamo il contenuto della cartella di distribuzione noteremo la presenza di un nuovo file png che però non si chiama come la nostra immagine originale ma avrà come nome un has del contenuto del file.

A questo punto se apriamo il nostro file index.html nel browser possiamo visualizzare l’immagine png, caricata dalla funzione imgImportTest da noi creata:

Nei prossimi articoli, esploreremo gli altri moduli di risorse disponibili per Webpack.