WebPack configurazione

Una volta istallato WebPack è sufficiente scrivere webpack da riga di comando per lanciarne l'esecuzione.

E' importante evidenziare che il comando potrebbe fallire quando WebPack non è istallato globalmente poichè il percorso locale potrebbe non essere nel PATH.

Utilizzare WebPack è molto semplice, per eseguire il bundling di un file javascript basta il comando:

webpack main.js bundle.js

Ricevere un errore poichè main.js non esiste. Il messaggio di errore contiene l'acronimo ENOENT (vi rimando a Google per capirne il significato). Per effettuare una prova con successo create un file -main.js_.

Utilizzare WebPack in questo modo non è in linea con la filosofia hipster. La buona prassi richiede la creazione di un file di testo contenente tutte le impostazioni in modo da evitare di doverle scrivere ripetutamente. Diamo il benvenuto al file webpack.config.js nella cartella di progetto.

Il file di configurazione permette di organizzare in modo migliore tutte le impostazioni di progetto.

Un esempio minimale:

// webpack.config.js configurazione minima
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  }
};

Ora che è stato creato il file, nella stessa cartella che contiene il progetto è sufficiente scrivere webpack per ottenere lo stesso risultato del precedente comando webpack main.js bundle.js.

Il file di configurazione non è complesso da capire, non ancora, almeno.

Nota su CommonJs

Il codice javascript module.exports = {} è tipico di CommonJs, se lo trovate strano non preoccupatevi, non è necessario comprendere inizialmente cosa stia succedendo. Possiamo semplificare il tutto dicendo che si definisce in quel modo un modulo; un modulo espone un oggetto che sarà poi restituito alla chiamata require().