Configuring a React app using Webpack and Babel

Configuring React apps using Webpack and Babel has the advantage of having the full control over your configuration. This is beneficial when developing large scale React applications where custom configurations becomes essential as the project gets matured.

Though React applications can be bootstrapped easily using create react app tool, behind the scene, create-react-app also uses Babel and Webpack for its purpose.

This article will guide you how to bootstrap a React app using Webpack and Babel.

To start, initialize a project using npm

npm init -y

Using Webpack to bundle our code

First we’ll setup Webpack. Webpack is simply a tool to bundle all your assets. Webpack is a bundler which frameworks like angular also uses via its angular-cli.

npm install webpack webpack-cli --save-dev

After installing Webpack you can add webpack configuration file. Since its version 4 it’s optional to add a configuration file but for the purpose of this project let’s add a configuration file in the root webpack.config.js

After this update the package.json so we can run webpack.

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

Configuring babel

React insists we make use of latests ES5 and ES6 features in our projects. Also React applications can be written with JSX syntax. Therefore there should be a way for JSX to be converted into JavaScript, the language which the browser understands.

Therefore we use Babel in our configuration.

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

Here we install few npm packages,

• 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

Next to configure babel create .babelrc file in the root and add the following

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

If you don’t set the presets, you’ll most probably get Module build failed error from babel-load.

Adding React

Adding react would be the next step.

npm i react react-dom

After this add a simple React component in src folder. We don’t do much here. Simple textbox and getting the output from that.

import React, { Component } from "react";
import ReactDOM from "react-dom";
class MyForm extends Component {
    constructor() {
        super();
    this.state = {
       value: ""
    };
    this.onInputChange = this.onInputChange.bind(this);
}
onInputChange(event) {
   this.setState({ value: event.target.value })
}
render() {
        return (
            <form>
                <input type="text"
                    value={this.state.value}
                    onChange={this.onInputChange}
                />
                <h1>{this.state.value}</h1>
            </form>
        );
    }
}
export default MyForm;

Since webpack expects a default index.js file in src folder create an index.js file and import the component to the file.

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

Next to render the component we need to have a html page and instruct webpack to render it. For that we need to install another 2 plugins.

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

We are installing two plugins here

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

Once that is done we also need to update the webpack configuration file with 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"
        })
    ]
};

Create a html page in src. This is the page in which our React app will be displayed.

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

Now run your application.

npm run build

Once you run this command, If all goes well, dist folder will get created with index.html file and main.js file.

You can run the index.html file in the dist folder and you should see a blank textbox. Type something and you’ll see your component is working!

From the look it’s not much. But if you can see this in browser that means you have successfully configured a React app with Webpack and Babel.