Setting up React for ES6 ES2015 with Webpack and Babel

This resource came in quite handy when setting up React in combination with ES6 ES2015, Webpack and Babel.

Installing all the required dependencies:

# Install Webpack
npm install --save-dev webpack

# Install the Babel Loader, for use with Webpack
npm install --save-dev babel-loader

# Install the es2015 and react presets, for use with Babel
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

The contents of webpack.config.js:

var path = require('path');

module.exports = {
  entry: path.join(__dirname, '../src/scripts/index.js'),
  output: {
    path: path.join(__dirname, '../build/scripts/'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        },
        progress: true
      }
    ]
  },
};

Integrate it as a grunt task using grunt-webpack, or run it directly using webpack-dev-server (install either one using npm i):

$ webpack-dev-server --progress --colors