WebPack Loader

Un loader è un processore che elabora il contenuto di un file risorsa (.js, .css e via dicendo). E' un concetto molto importante nell'ecosistema WebPack ed in generale è la chiave di volta di tutto.

In riferimento a ReactJs esiste un loader che converte i file .jsx in .js, riscrivendo il contenuto del file.

Convenzioni sul nome di un loader

Per convenzione un loader ha il nome xxx-loader. Ad esempio css-loader oppure style-loader e via dicendo.

Installazione di un loader

Un loader, prima di essere utilizzato, va istallato. Si utilizza npm per istallare un loader. Ad esempio:

npm install css-loader --save-dev

Utilizzo di un loader

Ci sono diversi modi per utilizzare un loader, noi ci limitiamo all'utilizzo con file di configurazione webpack.config.js.

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  // Inizio sezione module
  module: {
    loaders: [
      { test: /\.css$/, loader: "css" }
    ]
  }
  // Fine sezione module
};

La nuova sezione module contiene un array loaders che definisce:

• Quali loaders utilizzare (uno o più di uno)
• Su quali risorse utilizzarli

La riga interessante è questa:

{ test: /\.css$/, loader: "css" }

Analizziamo in modo sommario cosa fa questa riga.

test definisce l'espressione regolare per identificare le risorse su cui applicare il loader css.

Nello specifico, viene applicato il loader css a tutti i file con estensione .css

I loader possono essere concatenati.

{ test: /\.css$/, loader: "style!css" }

Questa riga esegue due differenti loader, uno in seguito all'altro. Il primo loader identificato è quello alla destra. L'ordine di esecuzione va da destra a sinistra.

Un ultimo esempio per "fermare nella mente" il concetto.

{ test: /\.css$/, loader: "style!css!less" }

Questa riga esegue tre loader, il primo loader less compila i file .less, successivamente applica il loader css ed in ultimo style.

Questi loader, devono essere istallati prima di poter essere utilizzati con successo.

npm install less-loader --save-dev

npm install style-loader --save-dev

In OSX questi comandi vanno eseguiti con sudo.