WebPack e Babel Loader

npm install --save-dev babel-loader

L'opzione --save-dev salva nel file di configurazione package.json il riferimento al pacchetto, contestualmente all'istallazione ed in modo automatico.

babel-loader

Babel-loader permette di trasformare il codice ECMASCRIPT6 in codice Vanilla ECMASCRIPT5.

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  // Inizio sezione module
  module: {
    loaders: [
      { test: /\.css$/, loader: "ss" },
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } // Questa nuova riga è quella relativa a babel loader
    ]
  }
  // Fine sezione module
};

I file .js, ad esclusione di quelli contenuti dentro node_modules saranno elaborati da babel-loader. /\.js$/ è una espressione regolare che risolve tutti gli asset di progetto con estensione .js, tipici di Javascript.

babel-loader e ReactJs

Come vedremo in seguito, babel-loader è perfettamente in grado di trasformare i file .jsx tipici di ReactJs in file .js comprensibili dai principali browser sul mercato.