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)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

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.