Webpack and Babel — What are they, and how to use them with React.

Starting a new project is not something one does often, compared to how much time we spend on projects that we have already started. It is, perhaps this, that makes me frequently overlook the configuration that goes into turning a blank slate to a wire frame of what you want.

Starting a React project is probably one of the most zero-configuration experiences you could have, thanks to the excellent create-react-app tool. But while using it to start a new blank React project for the nth time a few days ago, I realized apart from having a foggy idea, I never delved into what exactly goes on under the hood. So I did, and now I can make new React projects, free of magical tools. This article is the result of what I’ve learned.

Webpack and Babel — Tools we can’t code without

We’ll be configuring both of these for our React project, so first here’s a quick explanation what these tools are.

Webpack is a bundler that uses a dependency graph to bundle our code and assets (incuding static assets such as images) into a ‘bundle’ which we can then deploy.

Creating a huge monolithic JavaScript file is ugly and difficult to maintain, but multiple JavaScript files require multiple requests to fetch, and can add significant overhead. The solution is to write code splitting it into as many files as you need, and using require() (and as we’ll soon see, import ) statements to connect them together as we see fit. When we require something from a file, that becomes a dependency of that file. All our interconnected files and assets form a dependency graph. Then we use a bundler to to parse through these files and connect them appropriately based on the require and import statements and perform some more optimizations on top of it to generate one (sometimes more than one) JavaScript files which we can then use.

Webpack can also load non-js files, such as static assets, JSON files, CSS and more.

Babel, on the other hand, is a JavaScript compiler, sort of. It doesn’t compile JavaScript the same way gcc compiles C++. Instead it compiles newer JavaScript into older JavaScript. Technically, it is a transpiler.

What this means you can write your JavaScript using the latest features the language has to offer and Babel will compile your code into JavaScript that will run without issues on most browsers, even if they don’t support the cutting edge standards. Specifically in the case of React, your code will be in JSX format, which of course is not a standard supported by browsers, and you’ll need Babel to compile it down to regular JavaScript.

Configuring a new React app with Babel and Webpack

You’ll need to have Node and NPM installed. These are the only requirements.

Create a new folder and run npm init -y in it to initialize a blank project. (npm asks you a few configuration questions if you don’t use the -y option, you can do that if you don’t want to change them in your package.json later.)

Now you’ll have a package.json file which looks like this:

Now let’s install Webpack and Babel and add them as dependencies in package.json

npm i webpack webpack-cli webpack-dev-server --save-dev

This installs Webpack and the webpack-cli, which is a command line interface to use Webpack. webpack-dev-server is a simple server that we can use during development.

npm i @babel/core @babel/preset-env @babel/preset-react

This installs the core Babel package and two of Babel’s presets. Babel works by using ‘plugins’ to it’s core package to transform and compile the code you give it. preset-env is such a plugin that compiles down ES6+ (That is, versions of JavaScript that implement ECMAscript 2015 and newer standards) to ES5 standards-compatible JavaScript. If that didn’t make sense, know that it just makes your JavaScript work with browsers that don’t natively support these new features yet.

preset-react is similarly another plugin that allows Babel to recognize and compile React code.

Time to configure Webpack.

Create a new file called webpack.config.js and add the following:

Let’s go over what this does. Path is a handy module that comes with your Node installation that is used here to create an absolute path that is to be set as the output path for Webpack in line 6. entry is the file from which Webpack starts parsing your project. If you come from a background of C-like languages, think of it as the main() function for your code.

Under module , we specify some rules that should be used for different kind of files. Loaders are plugins for Webpack that are used for preprocessing files before they are bundled by webpack. For .js and .jsx files, we tell Webpack to use babel-loader which makes Webpack run these files through Babel before bundling them. For .css files we chain two loaders. style-loader allows us to import CSS into our JavaScript files, and css-loader allows us to use @import and url() in our CSS code. I won’t be using CSS in this little sample project, but I would consider these loaders essential.

(Check out the full list of loaders here: https://webpack.js.org/loaders/. Webpack also has many more configuration options, including a no-configuration option that runs with all default configurations, even if there is no webpack.config.js file.)

In case you haven’t guessed it already, we have to install these loaders before they can actually work.

npm i babel-loader style-loader css-loader --save-dev

Now let’s create .babelrc , the configuration file for Babel. It’s nice and simple, with it’s purpose obvious — tell babel to use the plugins we installed earlier.

Now it’s time to install React and get to coding!

npm i react react-dom --save

Now let’s create a src folder and inside that, write all our actual code. An html file is must, followed by the index.js which we specified as the entry point for Webpack and an App.js which will be the actual starting point for our app, since index.js just renders the contents of your app into the HTML element you specify.

Finally we have to install html-webpack-plugin and update our Webpack configuration to use it.

npm i html-webpack-plugin --save-dev

This plugin automatically creates an HTML file that serves the JavaScript bundles created by Webpack.

As a last step, we modify the Scripts inside our package.json to include:

"start": "webpack-dev-server --mode development --open --hot"

This allows us to run npm start to start the Webpack development server. The open and hot options opens our React app in a browser once it’s ready and enables hot reloading, respectively.

That should give us our final working React app.

Alternatives to Webpack

While Babel is pretty much the de-facto tool used for JavaScript compilation, Webpack does have some alternatives, such as Parcel(https://parceljs.org/).

Even npm has alternatives, such as yarn (https://yarnpkg.com/lang/en/), which is the what I prefer over npm.

Each of them have their pros, cons and differences, and it’s up to you to explore them and choose the right tool for the job.

Conclusion

If you are a beginner it might be worth it to just use create-react-app or a similar tool for whatever framework/library you are working with to skip the (admittedly) tedious initial configuration, but if you are building a project that you plan to take to completion, I feel it is important to have control over every aspect of it to avoid bloat and to allow for micromanagement, and in these cases knowing your node_modules can be a good thing.

All files discussed in this article can be found here: https://github.com/agzuniverse/webpack-babel-react

Find me on GitHub and Twitter.