Instructions for configuring ReactJS with Webpack and Babel

Ok in this article, I will guide you to configure the ReactJS combined Webpack and Babel. This article was made in 2021 and is configured on Webpack 5, as you know, most of the old articles are configured on Webpack 4, if this article is too old you can search for another article.

I will not go through the explanation of Webpack and Babel anymore, you can understand basically Webpack is a Javascript codepacker and Babel is responsible for transferring Javascript codes on the new version back to the old version suitable for browsers older. Here we start…

1. ReactJS Initialization

Create Folders, Files And Initialize NPM

First you initialize the directory and configure the new npm project:

Here I use npm init -y for quick project initialization, if you don’t like it, you can use npm init to configure each part in detail.

After running it will create the file package.json content similar to the following:

Next you create a file index.js and file index.html at directory public in the project root directory. Create another file App.js located in folder src, This is the file I will start writing ReactJS in. Once you’ve created your directory, it should look like this:

Install ReactJS

Install it first react and react-dom with the following command:

Open file index.js and add the following code:

Here the card <noscript> You can tell the browser to open Javascript.

And card <div> have id root used to render React.

Add the code to the file index.js again:

Finally write Hello World with React, it’s easy, isn’t it, open file App.js and add the following code:

2. Webpack Initialization

Install Webpack

First, install all the following packages:

1. webpack is the main library package.
2. webpack-cli used to run webpack.
3. webpack-dev-server used to run during development.

Webpack Configuration

Create file webpack.config.js located in the root of the project and add the following:

Add Bundle File Into HTML

When file index.bundle.js generated, I need to ask webpack to include it as a tag <script> into the HTML file. To do that, we need to install another library first:

Edit the file again webpack.config.js as follows:

3. Initialize Babel

Install Babel

Continue to install the following packages:

1. @babel/core is babel’s library package.
2. babel-loader used to load babel into the project.
3. @babel/preset-env used to convert Javascript code to ES5.
4. @babel/preset-react used to use babel with ReactJS.

Babel Configuration

Now we need to tell webpack to load the javascript files using babel before packing. Add the following code webpack.config.js:

4. Build And Let’s Go

Further scripts and file package.json as follows:

Ok now to run it, you just need to type npm run serve done, open http://localhost:8080/ and see the results.

To build the project you run the command npm run build then webpack will bundle all your Javascript files into a folder dist that I previously configured.

Run file index.html and enjoy the results.

5. Bonus

• To use Javascript Asynchronous (on babel 7.4 no longer using this package) you need to fix it entry as follows:

6. Ending

This article is finished, if there are any mistakes, please comment below to contribute to me. Leave 1 vote and follow me if you find the article helpful for me.

Reference sources:

1. https://webpack.js.org/concepts/
2. https://viblo.asia/p/reactjs-ket-hop-voi-webpack-part-1-Eb85ogr052G
3. https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9
4. https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined