Setup React Project with Webpack 4 and Babel

Facebook created create-react-app utility to set up React Project with minimum effort and configuration. There is also a way to create your own setup for React project from scratch. Let’s start without wasting too much time.

Before starting, make sure you have installed npm on your computer. To check that run the following command npm -v this command outputs you the version of npm. NPM comes with NodeJs and you can install it from the official Node.js site.

Our folder structure is going to be like the below image

Use the followings commands to create the directory structure

mkdir react-app
cd react-app
mkdir src
cd src
mkdir components styles

Lets Initialize the Project:

First of all we are going to create packages.json with node package manager(npm)

npm init -y

Install Webpack and React:

Webpack is a module bundler that bundles all our project files into a single file. So lets install it to our project.

npm install webpack webpack-cli --save-dev

The above command will add and install webpack and webpack-cli to our project. After completing the about command time to install react.

npm install react react-dom --save

Installing Babel:

We need to install babel to work with React. Because babel transpile ES6 and JSX to ES5. We need to install following as a dev dependencies babel-core, babel-loader, babel-preset-env and babel-preset-react.

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

Create index.js:

Now time to create index.js file in your project’s /src folder.

Create index.html

Create index.html in same location /src folder.

Entry and Output file:

Create webpack.config.js in the root folder /react-app, We have to define some rules for our loaders.

As you can see in the above code Webpack will bundle all our js code into index_bundle.js file in /dist directory.

Now we can add some loaders inside this file.

Add following codes inside your webpack.config.js file

You can that we have added the css-loader and style-loader but we haven’t installed them yet, So we have to add them with npm.

npm install css-loader style-loader --save-dev

.babelrc

Now create .babelrc file in the root of our project directory. This file will tell babel which preset to use for transpiling the code.

Compile file using webpack:

Add the following line inside the script object of the package.json file

We used –watch in development mode because whenever we change the source files, webpack will automatically complie the source files.

Now we can compile our project with the following command:

npm start

And you will see the following output in the terminal

Create App.js

Now move to the react coding part, Create an App.js file inside src/components directory and App.css file inside the src/styles directory.

App.css

And edit our index.js file located in /src directory

Installing Html-webpack-plugin:

html-webpack-plugin will generates the html file with js and css and writes the file to /dist/index.html

npm install html-webpack-plugin --save-dev

Now we have to add this plugin inside the webpack.config.js file

Installing webpack-dev-server:

webpack-dev-server helps us to open and reload the page automatically.  We need to use npm to install the webpack-dev-server

npm install webpack-dev-server --save-dev

And change the package.json start script:

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

–open flag helps to open the web browser and –hot flags helps to reload the webpage.

now run npm start and that’s it.

You can download the complete codes from GitHub.

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.