Webpack loaders

We’re about to step into the future.

So far in this book, we’ve been using JavaScript in its old form. The language recently (in 2015) got a facelift, with a smattering of conveniences and new functionalities added. This new release is called ECMAScript 2015, or ES6 for short. It’s much more enjoyable to use than older JavaScript (ES5), but there’s a problem.

All internet browsers are perfectly capable of running JavaScript, but many users are using older browsers that are not yet capable of running ES6. So, as developers, we want to use ES6, but how can we do so and still have our website work on older browsers?

The key is that ES6 doesn’t do much that ES5 couldn’t do, it just makes it easier to write.

For instance, looping through an array was done like this previously:

var arr = [1, 2, 3, 4];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

Now, it's done like this:

[1, 2, 3, 4].forEach(num => console.log(num));

An older browser understands the first one, but not the second, but the code does the same thing. So, all we need to do is convert the second code snippet into the first. This is where Babel comes in. Babel is a transpiler tool for JavaScript; think of it as a translator. We give it our beautiful ES6 code, and it converts it into uglier but more browser-friendly ES5 code.

We will stick Babel into our Webpack build process so that when we bundle all our JavaScript files, we also transpile them.

To get started, we will install Babel, along with a bunch of plugins and add-ons for it to make it play nice with React. Stop your Dev server, and then run the following:

yarn add babel-core babel-loader babel-preset-es2015 babel-preset-react babel-plugin-transform-class-properties

Yikes, that’s a lot of packages all at once! The important one for the next step is babel-loader. This is a Webpack loader, and we use it to grab (and then transpile) our JavaScript files before passing them to Webpack for bundling. Let’s plug it into Webpack.

In our webpack.config.js, make a module object with a loaders array within it:

Then, we can define our loader inside the array.

We will make an object with four keys: test, exclude, loader, and query:

• Test is what the loader will use to determine which files it should transpile. For Babel, we want to run on all JavaScript files, so our test will be for the files ending with .js:

test: /\.js$/

• Exclude is what not to run on. We can skip our entire node_modules folder, since the packages are already in ES5:

exclude: /node_modules/

• Loader is what our loader is called:

loader: ‘babel-loader’

• Finally, we’ll use query to define our presets (what Babel will use to transpile the JavaScript):

query: {
  presets: ['es2015','react'],
  plugins: ['transform-class-properties']
}

Here's what the full file should look like:

module.exports = {
  entry: __dirname + "/src/index.js",
  output: {
   path: __dirname + "/public",
   filename: "bundle.js",
   publicPath: "/"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015','react'],
          plugins: ['transform-class-properties']
        }
      },
    ]
  },
  devServer: {
    contentBase: "./public",
    historyApiFallback: true,
    inline: true,
  }
};

Run yarn start and look for errors. If there aren’t any, we can take it for a test drive and write some ES6 code.