How to setup React application from scratch with Webpack in 2020

5 min readMay 4, 2020

When I took my first React JS class I was taught to use create-react-app for starting a new React JS project. After discussing it with my mentor I came to know that this is not the way an application is made and deployed in production. Ever since create-react-app is introduced starting a new project is made very easy for a beginner but, Ejecting it from the CRA environment is not a cakewalk. After completing my training I started learning development the production way and one of the biggest discoveries was Webpack. So today I’ll tell you how you can setup a react application very easily using Webpack.

What is Webpack?

Webpack is an open-source javascript library that is used to bundle modules, as well as static assets(like images, fonts, CSS files, etc.) depending upon the loaders passed inside it. Typically a js file contains all the webpack configurations. Apart from bundling the modules and assets webpack also provides a development server that is used while developing. We will need to code this and will do it in the later section but first let us get other things working.

Steps to setup React App

To start a new project it’s pretty obvious you need to create a new folder/directory you can create it by GUI way or just run a simple command mkdir <folder_name>

Step 1 (Initialize the directory with npm): In order to install packages you need to initialize the directory using the following command (Note: -y flag is used in order to choose the predefined options and default entry as index.js):

npm init -y

Step 2 (Installing Webpack packages): To use the power of webpack you need to install packages using the following command:

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

Step 3 (Installing babel transpiler): Babel is a very important tool that converts ECMAScript 2015 and above code to old compatible versions. There are 4 packages that you need to install. babel-loader is used by webpack to load the required files, babel-preset-env is used to convert the javascript code to ES5 syntax & babel-preset-react is used to convert JSX (the HTML you write in your code) to JS. You need to run a command in your shell to install these packages.

npm i babel-core babel-loader babel-preset-env babel-preset-react --save-d

Step 4 (Installing react required libraries): Now, to proceed further we need the actual react library and another library called react-dom which is actually responsible for all the greatness React offers(Virtual DOM). Fire the following command in your shell:

npm i react react-dom

Step 5 (React HTML plugins): To generate an HTML file/ to use an existing template we use these plugins, Install them with this simple command:

npm i html-webpack-plugin html-loader --save-d

Step 6 (Install all types of loaders): In order to import the assets, we need to provide these loaders to webpack. Fire the following command:

npm i file-loader style-loader css-loader --save-d

Step 7 (To reduce the size we need this extra package): Uglify(opp. of prettify) basically compress your code in build reducing the size. Fire this command:

npm i uglifyjs-webpack-plugin --save-d

This completes the first part of creating our react application with webpack now in this section we will touch(create) files and make a simple hello world app.

Firstly, We will create our webpack config file using the following steps:

create the file webpack.config.js (use touch or create it GUI way). Now, following is the code you need to add to it:

A line by line explanation will be useless for a beginner but I will try my best to teach you this part. Firstly, We import all the required libraries among which we have path( to give the file path to webpack), html-webpack-plugin which serves the template or generate a new HTML file, webpack is pretty obvious to import since we are writing a webpack config file and Uglify-js-plugin is nothing but a way to reduce the size of the final file by uglifying it.

Moving forward we have exported and Object which contains the configuration. The keys in this Object are entry (Which specifies which is the first place react start here, I am making it to be client/index.js so I start coding with this file only), Output (This is where we intend our build finally created to go path specifies the path and filename species the name you want to give to you bundle file I want its name to be index.bundle.js) You need not care of devServer as it will remain same just take care of the contentBase property which is the path for your build folder, module key is for the loader you have to pass the loader installed along with the expression(test) to identify the type of file you want to load with that loader and Finally the plugins are provided to webpack for sake of some operation i.e Uglifying the build, serving the HTML file, etc.

2. Create a file .babelrc to start babel transpiler. Content of it is an object here it is:

3. Make a public folder containing the dist folder and an index.html file with the following template:

4. Create a client folder that will contain the code for the front end.

5. Inside client folder create an index.js file and its content will be:

6. Edit the package.json file and do the following changes:

7. The moment of truth run the command: