Build a React app with webpack (Without Create React App)

2 min readJun 7, 2022

Webpack is very strong tool by which we can easily bundle our projects. In this blog, I’m trying to describe how we can build our own react app without using create-react-app.

Make a project first and add package.json

mkdir react-with-webpack
cd react-with-webpack
yarn init -y

Install in Dev Dependencies:

yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader webpack-bundle-analyzer webpack-cli webpack-dev-server

Install React Dependencies:

yarn add @testing-library/jest-dom @testing-library/react @testing-library/user-event react react-dom react-scripts webpack

Create a webpack.config.js in the root folder and in the config file add those line of code. If you don’t know about webpack, please read this blog first.

https://pritomchowdhurydip.medium.com/getting-started-with-webpack-cae86a43f343

Now Create a src folder and make three file

touch App.js
touch index.html
touch index.js

In the index.html, Paste this code,

<!DOCTYPE html>  <html lang="en">    <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title><%= htmlWebpackPlugin.options.title %></title>  </head>  <body>    <div id="root"></div>  </body></html>

In the index.js, Paste this,

import React from "react";import ReactDOM from "react-dom/client";import App from "./App";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(<App />);

and last in the App.js, paste this,

import { useState } from "react";export default function App() {  const [counter, setCounter] = useState(0);  const handleClick = () => {    setCounter(counter + 1);  };  return (    <div>    <h1>My App</h1>    <h5>{counter}</h5>    <button onClick={handleClick}>Click</button>    </div>  );}

Now in the package.json scripts, lets add two more scripts,

"scripts": {  "test": "echo \"Error: no test specified\" && exit 1",  "webpack": "webpack",  "start": "webpack-dev-server --mode development"}

That’s all. Now in the terminal, lets run yarn webpack and see the magic happens.

yarn webpack

If you face any difficulties, Feel free to check this github repo and don’t forget to give a star. Thanks, Happy coding.

Build a React app with webpack (Without Create React App)

Written by Pritom Chowdhury Dip