ES6 React Build Tools Using Webpack and Babel

You get access to some pretty slick syntax with React and ES6, but there is that sticky initial hurdle of converting it into something your browser can actually understand. Fortunately enough, the set up isn't too bad at all using webpack and babel.

Get Your Dependencies

There are a healthy dose of npm packages you need to get started. Here's the overall list.

npm install --save-dev  
babel-core  
babel-loader  
babel-preset-es2015  
babel-preset-react  
webpack

Set Up Babel Configuration

Next up, we'll need to create a .babelrc file. This acts a configuration file for the Babel transpiler which is what will do the heavy lifting of converting es6 to es5 and React JSX to good old Javascript. Babel on its own doesn't do a thing, but by including presets, you can make the magic happen.

The .babelrc is in JSON format, and for our purposes, should look like this:

{
  "presets": ["es2015", "react"]
}

This will tell babel to run all the code it is passed through these presets, which we installed through npm above. These presets will take care of transpiling their eponymous code into plain Javascript everyone's browser can understand.

As it is now, you can convert single files into es5 JS. As long as you have babel globally installed, you can run:

babel srcfile -o destfile

Unfortunately, React apps are more than one file and there are all those ever so useful import statements to take care of. Babel can't handle that part on its own, so we can make use of Webpack.

Webpack Configuration

Webpack will look for a webpack.config.js file for its configuration options. Webpack is a module bundler. It will take a big mess of separate files with a bunch of listed dependencies, and nicely bundle them into a single consumable file. Webpack also introduces the concept of loaders. Loaders are similar to tasks in Gulp, and can be associated to any file or file type. Loaders even allow you to require in non-JS files such as CSS and transform them however necessary.

The only loader we're concerned with is babel. What Webpack will do for us, is run all of our files through babel-loader, which will use the presets we specified in .babelrc to convert our ES6 and JSX into plain JS. Then, Webpack will go through and take care of all the import statements, or require as the files are in ES5 now, and bundle everything into a nice single file we can include as the source file in our HTML.

To unlock the magic, we'll need to set up a webpack.config.js file. Like gulp and grunt this is just a regular JS file. We'll need to specify a few essential things.

The first, we'll give Webpack an entry point. This is the top level file from which all other files are imported in.

Next, we'll set up an output file where Webpack will build our bundle.

Last, we'll specify the loader setup we need to use. The loaders option allows us to specify which directories we want to target in the include property. It also allows us to pass a regex string to test representing all files within those directories which we want to target. In this case we'll look at all .js files in the .src folder, although you might want .jsx depending on you project. Finally, we tell Webpack we want to use the 'babel' loader on those files.

var webpack = require('webpack');  
var path = require('path');

var dist = path.resolve(__dirname, 'dist');  
var src = path.resolve(__dirname, 'src');

var config = {  
  entry: src + '/index.js',
  output: {
    path: dist,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.js?/,
        include: src,
        loader: 'babel'
      }
    ]
  }
};

module.exports = config;

In your project directory, open up a terminal and run:

webpack -d --watch

And watch the magic happen.

The --watch flag will run Webpack each time your files change.

There is the barebones setup for working with React and ES6. Using ES6 and JSX make working with React much more elegant, and with this simple tooling, it's quick to get off the ground.

Menu