Setting Up Webpack for React, ES6, and Babel for Development

Adding React and ES6 will put you one step further in becoming a highly-demanded developer. But how do you start learning?

Well, plenty of tools like create-react-app allow to jump into React from the get go.

But, this means not learning a skill that software engineers find very important: knowing how to set up your own development environment.

So let’s make sure to learn this skill and get down to business!

1. Initializing the Environment

We’ll use npm to install all of our packages. You can easily check if you have npm by running npm -v within your terminal. Npm ships with Node, so if you need npm, head to this page.

  • Now find to the root of your project in your command line or terminal. And run npm install init -y.

Great! You should now have one file in your directory: package.json. Next we need two boilerplate files: bundle/index.html and app/index.js.

  • Make a build folder, and place an index.html file within it: build/index.html. Next, within the html’s <body></body> tags, place a script tag with a src of bundle.js.

As a result, your bundle/index.html should look like this:

bundle/index.html
  • Then make an app folder, and place an index.js file within it. You can add some quick es6 code if you like, app/index.js:
const message = "Hello, world!";
console.log(message);

2. Installing and Configuring Webpack

First off, you might be wondering, why do we need webpack?

What an excellent question! To answer, webpack bundles modules. It allows us to write es6 code within multiple files and gather them into one JS file. It reduces time spent loading resources. It also prevents errors such as the user loading multiple libraries in the wrong order.

Now back to setting up! In this section, we hope to get the console.log(message) from app/index.js to run from build/bundle.js.

  • Step one! Run npm install --save-dev webpack. This will place webpack as a devDependency in your package.json file.

Then we’ll install some packages that allow us to use an es6 transpiler. But, hold the phone, what is a transpiler? Simply, transpilers read code from one language and produce the equivalent code in another. We need one because not all browsers support fancy es6 yet. We’ll use Babel, one that turns es6 code into the friendly pre-es6 JavaScript that all browsers can handle.

  • Install the babel packages with npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-polyfill webpack-dev-server.

Altogether, webpack will know how to use these packages to transpile es6 code. Also, webpack-dev-server will allow our application automatically as we make code updates! This all comes together in a webpack.config.js file. This will tell webpack where to find the original code, where to place the bundled code, and what languages to transpile.

  • Create webpack.config.js and add this content:

There’s a ton to digest here. To briefly explain, as a large object, webpack.config.js tells webpack where to find the entry code. It then outputs transformed code to a specific path and file name. The module with loaders tells webpack to use the babel transpiler. Note that we catch all JS files, while still excluding all those huge ones in the node_modules folder. And finally, the devServer sets up the live coding environment.

Finally, just add a couple changes to package.json.

  • Edit the “scripts” object in package.json by removing the “test” script, and replacing it with a “build” and “start” script.
  • Then add a babel object that has a presets array containing “es2015”. As a result, package.json becomes:

Great! You can now run either npm run build to create a build configuration of the project. Or run npm start and visit localhost:3000 in your browser to see the development environment in action. And… the console.log(message) finally appears from bundle.js! Woohoo!

3. Adding React

Awesome! We now have a working development environment for es6 with webpack and babel. However, what if you want to add React?

We’ll need to take three steps: install a few more packages, make some updates to package.json, and insert a tiny div into index.html.

  • First, run npm install --save-dev react react-dom babel-preset-react.

Great, this should install the necessary tools for React. Then, for the file updates:

  • Update the presets array in package.json to also have “react.” The “babel” object now looks like:
"babel": {
"presets": ["es2015", "react"]
},
  • Then index.html should have div with an id of ‘root’ right above the script tag. As a result, the body index.html becomes:
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>

Easy peasy! That’s all we need in order to add React to webpack! Here’s code that you can use in index.js to quickly see React in action:

Add with that, we have a full development environment with webpack, es6, babel, react, and live code updates! :)

Imagine how all your hacker friends will react as you babel on about you created your own development environment from scratch! Excellent work!


Final Remarks

In the interest of keeping this article short, I didn’t explain some concepts too far in-depth.

Fear not though, I have a free course online that guides anyone starting out with ES6. It has video tutorials on coding that explain concepts in much more detail, exercises, coding challenges, quizzes, articles (with jokes), and more. Check it out!

Also, if you want to learn ReactJS and Redux to add these skills to your profile, then I would definitely recommend signing up for my ReactJS & Redux course. It goes through four applications, and reveals a secret method to easy development with Redux! Oh, and I set it to its lowest price for anyone on Medium :)

Also, here’s the source code for this tutorial. It’s actually the repository for the es6 course, but it has the same setup.

If this article helped you out, then go ahead and press the ‘heart’ button. Feel free to reach out to my by visiting my website, where you can find all of my contact info :)

Excellent work again, and keep on coding!