Setting up React for ES6 ES2015 with Webpack and Babel

es6-webpack-react-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
Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.