Gli asset/source di Webpack

di Rocco Macellaro

Questo articolo è l’ultimo di una serie di articoli dedicato ai moduli di risorsa di webpack, abbiamo visto “asset/resource”, “asset/inline” e generic “asset

In questo articolo impareremo il tipo di modulo “asset/source” questo modulo legge il contenuto del file e lo trasforma in un stringa JavaScript inserendo direttamente tale stringa nel bundle JavaScript, così com’è, senza alcuna modifica. Analogamente all’asset inline, questo tipo di modulo non genera un nuovo file nella directory di output.

Come di consueto utilizzeremo anche in questo articolo la nostra solita applicazione di prova utilizzata anche negli articoli precedenti per spiegare il funzionamento dei moduli “asset/resource”, “asset/inline”, “asset”.

A scopo dimostrativo, prendiamo un piccolo pezzo di testo ad esempio la descrizione della nostra applicazione (“questa è una semplice applicazione javascrip per testare il funzionamento di webpack”) e inseriamolo in un file che chiameremo description.text all’interno della nostra cartella src. 

Ora vediamo come utilizzare questo testo all’interno della nostra applicazione, a tal proposito apriamo il nostro file index.js che contiene già del codice di esempio utilizzato negli articoli precedenti e aggiungiamo la nostra importazione del file, dopo di che utilizziamo la variabile contenente il nostro testo per inserirla nel dom della pagina, in questo modo:

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

const descElement = document.createElement("i");
descElement.innerText = description;
const body = document.querySelector('body');
body.appendChild(descElement);

shoppingList();
imgImportTest();

Prima di compilare il codice per visualizzare il risultato finale però devo insegnare a webpack a trattare i file con estensione .txt, quindi vado all’interno del nostro solito file di configurazione webpack.config.js e vado ad aggiungere una nuova regola nei moduli questa regola prenderà di mira i file di testo e utilizzeremo il tipo di modulo “asset/source”.

// 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: {
   rules: [
     {
       test: /\.(png|jpg)$/,
       type: 'asset',
       parser: {
         dataUrlCondition: {
           maxSize: 2 * 1024 // 2 kylobytes
         }
       }
     },
     {
       test: /\.txt/,
       type: 'asset/source'
     }
   ]
 }
};

Questa regola informa Webpack che ogni volta che importiamo un file di testo, deve trattare questo file come una risorsa del tipo di modulo asset/source. Ciò significa che Webpack leggerà il contenuto del file di testo e ci fornirà una stringa JavaScript contenente tali contenuti, e quindi possiamo utilizzare la stringa JavaScript come desideriamo.

Passiamo al terminale ed eseguiamo il solito comando per compilare:

npm run build

Se tutto è andato a buon fine possiamo aprire la nostra pagina web nel browser e verifichiamo se funziona tutto correttamente, come puoi vedere, la nostra pagina ora visualizza una descrizione dell’applicazione con il testo che ha recuperato all’interno del file description.txt.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *