Esempio completo WebPack con babel-loader

Sistema operativo: Windows10

L'obiettivo di questo esempio è di creare un piccolo progetto che grazie a WebPack converta una piccola app scritta in ES6 Harmony in codice javascript usabile dai principali browser sul mercato.

Aprire un prompt dei comandi con diritti di amministratore.

Creare la cartella di progetto.

mkdir webpack-babel-loader

Accedere alla cartella

cd webpack-babel-loader

Inizializzazione npm

Inizializzare npm

npm init

E' possibile premere invio ad ogni domanda. Al termine di questo comando viene creato un file package.json che contiene i valori digitati.

Inizializzazione webpack

Installare webpack

npm install webpack --save-dev

L'opzione --save-dev fa si che venga modificato il file file package.json in modo da avere un riferimento al pacchetto appena istallato.

{
  "name": "webpack-babel-loader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^1.8.11" // <--
  },
  "devDependencies": {
    "webpack": "^1.8.11" // <--
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Creare un file main.js con il seguente contenuto

console.log('yo!');

lanciare webpack specificando il file di input e quello di output

webpack main.js bundle.js

Il file risultante bundle.js è stato creato all'interno della cartella.

Istallazione e configurazione babel-loader

Istallare babel-loader con l'ormai solito comando.

npm install babel-loader --save-dev

Come detto in passato, il modo migliore per utilizzare webpack è quello in unione con un file webpack.config.js. Creiamo il file con il seguente contenuto:

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

La cosa interessante ed importante di questo codice è che c'è un riferimento al loader babel (la parte finale del nome -loader può essere omessa. Tutti file con estensione .js vengono processati da babel-loader.

Se il vostro file .js contenesse codice ES6 Harmony questo verrebbe convertito nel più compatibile ES5 vanilla. Il codice ES6 Harmony è compatibile solo con i browser di ultima generazione, mentre ES5 Vanilla ha uno spettro di compatibilità molto ampio, potrei dire che è supportato da tutti i browser.

Per fare una prova modificare il contenuto di main.js e lanciate nuovamente webpack.

// ES6 javascript
let x = [0,1,2];
x.map(x => console.log(x * x));

Impostare webpack per eseguirsi ad ogni salvataggio

Il seguente comando imposta webpack in modalità changes listening

webpack --watch

Non appena salverete una modifica al vostro file, viene lanciata la compilazione.

Nota Apple OSX

Quando WebPack è istallato localmente si può lanciare la sua esecuzione con il seguente comando.

$(npm bin)/webpack

$(npm bin) restituisce il percorso dei binari istallati localmente.