Configuring Babel and Webpack for React

3 min readApr 29, 2021

To have a better understanding and have more control over the configuration, I wanted to learn how to configure a react app manually using Babel and Webapck. This is beneficial when developing a large-scale app. create-react-app bootstraps the react app with Babel and Webpack makes it easy but in this post, I will demonstrate how to configure Babel and Webpack from scratch.

First, I made a directory for the project and initiate the project using npm.

mkdir my-app
npm init -y

This created a package.json in the folder. After that, I decided to configure the Webpack. Webpack is a tool to buddle all the project assets. To add Webpack, I had to install webpack and webpack-cli.

npm install webpack webpack-cli --save-dev

After installing the Webpack, it’s optional since version 4 to add a configuration file to the root of the project. For this demo purpose, I added a config file in the root naming it webpack.config.json. After this, I added a script in my package.json file so I could run Webpack.

"scripts": {
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

After that, I focused on configuring babel. Babel helps transpiling JSX from React app to plain old Javascript. To install Babel I had to install these dependencies using npm:

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

Lets look at the packages here:

babel-loader : allows transpiling JavaScript files using Babel and webpack.
babel/preset-env: preset that allows you to use the latest JavaScript without needing to worry about syntax transforms needed by your target environment
babel/preset-react for transforming JSX to JavaScript

After this, to configure babel I created .babelrc file in the root and added the following:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

This is important, if we don’t set the presets, this will most probably throw a module build failed error.

Next, I added React to my project.

npm i react react-dom

For this demo purpose, I created a simple component add just an h2 to render the components. First, I needed to configure the index.js since webpack expects a default index.js file in the src folder. So I created an index.js file and import the component to the file:

import React from "react";
import ReactDOM from "react-dom";
import MyComponent from './components/MyComponent';ReactDOM.render(<MyComponent />, document.getElementById('root'))

And in the MyComponent.js file:

import React from "react";const MyComponent = () => {
  return (
       <h2> Hello World</h2>
  )
}export default MyComponent;

Next, to render the component I needed to have a html page and instruct webpack to render it. For that, I needed to install 2 more plugins.

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

HEre a closer look at the plugins:

html-webpack-plugin : For generating HTML5
html-loader: Exports HTML as string. HTML is minimized when the compiler demands.

Now it was time to update the webpack config file. In the webpack.config.js file I added these mapping rules:

const htmlWebPackPlugin = require('html-webpack-plugin');module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new htmlWebPackPlugin({
            template: "./src/index.html",
            fileName: "./index.html"
        })
    ]
};

In the src folder, I created an HTML page. This is the page on which my React app will be displayed.

<html>
<head>
</head>
<body>
    <div id="root"></div>
</body>
</html>

After that I ran :

npm run build

With this command, a dist folder got created with index.html file and main.js file.

After that, I ran the index.html file in the dist folder, and in the browser, I could see my components displaying:

This is it. Thanks for reading. I would appreciate any feedback or suggestions.

Configuring Babel and Webpack for React

Written by Dhrubo Dh