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:
- 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:
- Then make an app folder, and place an index.js file within it. You can add some quick es6 code if you like,
const message = "Hello, world!";
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
- Step one! Run
npm install --save-dev webpack. This will place webpack as a devDependency in your package.json file.
- 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.
webpack.config.jsand 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:
"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:
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!
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 :)
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!