How to create a React App using Webpack from scratch?

In this article, I have created a React application from scratch using Webpack.

The libraries used are listed below:

                "react": "^17.0.2",

    "react-dom": "^17.0.2",

    "react-router-dom": "^5.1",

    "webpack": "^5.68.0",

    "webpack-cli": "^4.9.2",

    "webpack-dev-server": "^4.7.4"

    "html-webpack-plugin": "^5.5.0",

1) Clone all the content from the git initial branch which contains the node packages we will use and the folder structure with the files we need to create an application.

2) We must add two new scripts inside package.json file

    "build": "webpack build --config webpack.config.js" - to build react app.

    "serve": "webpack serve --config webpack.config.js" - to run and serve on react application on local.

3) Overview of some important files created and their purpose:

package.json - Contains which libraries and dependencies we are using. run/build scripts we will define here.

index.html - Main entry file.

index.js - Webpack will see the first file.

webpack.config.js - Define all configurations of webpack here.

App.js - All routes and navigation logic added here.

The pages folder contains different pages.

The button is the common component we use to navigate through the application.

As we must focus on webpack configuration here all other react and HTML will be as simple as it must work only.

A short description and links to articles for reference under webpack config file.

to run the application - npm run serve

to extract the build - npm run build

{bulid will be exported under the dist folder.}

Visit the GitHub repository for this project.

React App Using Webpack

Thank you. Have a good day.

- Atish Bagate