Mastering React App Configuration With Webpack

Developers who rely on tools like Create React App may not have had direct experience with Webpack. However, configuring Webpack manually provides valuable insight into the underlying mechanics of how modern web applications are built and bundled.

This guide offers a step-by-step walkthrough for setting up a React application with Webpack from scratch, complete with clear and detailed explanations.

What Is Webpack, and Why Do We Use It?

Webpack is a powerful module bundler. It takes all of your JavaScript files — along with other assets like CSS, images, and fonts — processes them (e.g., transpiling, minifying), and bundles them into optimized files that can be efficiently loaded by a browser.

In a React project, Webpack helps you:

• Bundle .js and .jsx files into a single or multiple optimized scripts for production.
• Use Babel to transpile modern JavaScript (ES6+) and JSX into code that browsers can understand.
• Process styles, images, and other assets, so they can be imported and used directly in your components.
• Run a local development server with live reload — Webpack can serve your app locally using a tool like webpack-dev-server. This provides features like hot module replacement (HMR) or live reloading, so whenever you save a file, the browser updates automatically without requiring a full page reload. This improves development speed and feedback loops.

Prerequisites

Before getting started, ensure the following:

•  Node.js and npm are installed on your machine
•  You have a basic understanding of React and JavaScript

You can check if Node.js and npm are installed by running the following commands in your terminal:

node -v
npm -v

If these commands don’t return a version number, you’ll need to install them.

Download and install Node.js (which includes npm) from the official website.

Step 1: Set Up Project Folder

Create your project directory and initialize it:

mkdir my-react-webpack-app
cd my-react-webpack-app
npm init -y

This creates a package.json file, which will track our dependencies and scripts.

Step 2: Install Dependencies

React and ReactDOM

These are the core libraries used to build and render your React user interface.

npm install react react-dom

Webpack, Babel, and Loaders

To bundle and transpile your code, we need webpack, Babel, and a few loaders and plugins.

Install them as development dependencies:

npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev html-webpack-plugin css-loader style-loader

Why These Packages?

• webpack, webpack-cli – Core Webpack functionality and its command-line interface.
• webpack-dev-server – Spins up a local server with live reloading for faster development.
• babel-loader – Instructs Webpack to use Babel for transpiling JavaScript and JSX files.
• @babel/core, @babel/preset-env, @babel/preset-react – Required Babel packages to compile modern JavaScript and React JSX syntax.
• html-webpack-plugin – Automatically generates an HTML file and injects the Webpack bundle(s) into it.
• css-loader, style-loader – Enable importing and injecting CSS styles directly into your React components.

Step 3: Configure Babel (.babelrc)

Babel is a JavaScript compiler that allows us to use modern JavaScript (ES6+) and JSX in our React code and then transpiles that code into a format compatible with older browsers.

Without Babel, browsers wouldn’t understand JSX or newer JavaScript syntax — especially features like arrow functions, classes, optional chaining, etc.

Create a .babelrc Configuration File

Create a .babelrc file in the root of your project with the following content:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Explanation

• @babel/preset-env – This preset tells Babel to convert modern JavaScript (ES6+) into a version that works in the browsers you target. It automatically determines the Babel plugins you need based on your environment or browser support configuration.
• @babel/preset-react – This preset enables Babel to understand and transpile JSX syntax, which is not natively understood by browsers.

Why This Matters

React uses JSX, which looks like HTML but is actually syntactic sugar for React.createElement() calls. Modern JavaScript (like arrow functions, async/await, let/const) also isn’t supported in all browsers. Babel ensures your code works reliably across different environments.

By using these presets, your code will remain clean and modern while still being compatible with older browsers.

Step 4: Webpack Configuration (webpack.config.js)

Webpack is responsible for bundling your project files, transforming them through loaders, and optimizing them for deployment. Now, you need to configure Webpack to process your React code and other assets.

Create the webpack.config.js File

Create a file named webpack.config.js in the root directory of your project and add the following configuration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // Entry point where the bundling starts
  entry: './src/index.jsx',

  output: {
    // Output directory for bundled files
    path: path.resolve(__dirname, 'dist'),
    // Name of the bundled file
    filename: 'bundle.js',
    clean: true, // Automatically clears previous build files in 'dist'
  },

  module: {
    rules: [
      {
        // Use Babel to transpile .js and .jsx files
        test: /\.(js|jsx)$/,
        exclude: /node_modules/, // Exclude 'node_modules' folder from Babel processing
        use: ['babel-loader'],
      },
      {
        // Process CSS files
        test: /\.css$/,
        use: ['style-loader', 'css-loader'], // Inject CSS into the DOM
      },
    ],
  },

  resolve: {
    // Extensions that can be omitted during import statements
    extensions: ['.js', '.jsx'],
  },

  plugins: [
    // Generate an HTML file and inject the bundled JS into it
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],

  devServer: {
    // Set the static directory to 'dist' where bundled files are stored
    static: path.resolve(__dirname, 'dist'),
    // Set the port for the development server
    port: 3000,
    open: true, // Open the browser automatically when the server starts
    hot: true, // Enable hot module replacement for live updates
  },

  mode: 'development', // Set to 'production' for optimized builds (minification, etc.)
};

Explanation

Entry

• entry: './src/index.jsx' – This is the starting point of your app. Webpack will begin bundling from the file specified here. In most React projects, this is usually index.jsx or index.js.

Output

• path: path.resolve(__dirname, 'dist') – Defines where Webpack should place the bundled files. __dirname refers to the root directory, and 'dist' is the folder where the output will be saved.
• filename: 'bundle.js' – Specifies the name of the output file (i.e., your bundled JavaScript).
• clean: true – Ensures that the output directory is cleared before a new build, preventing old files from lingering in the dist folder.

Module

• rules – These define how different file types should be handled during the bundling process.
• Babel loader:
  • test: /\.(js|jsx)$/ – This regular expression matches both .js and .jsx files.
  • exclude: /node_modules/ – Excludes the node_modules folder from Babel processing to avoid unnecessary transformations.
  • use: ['babel-loader'] – Tells Webpack to use babel-loader to transpile JavaScript and JSX files through Babel.
• CSS loader and style loader:
  • test: /\.css$/ – Matches .css files.
  • use: ['style-loader', 'css-loader'] – style-loader injects the CSS into the DOM.css-loader processes the CSS, allowing you to import CSS directly into JavaScript files.

Resolve

• extensions: ['.js', '.jsx'] – This configuration allows you to omit the extensions when importing modules. For example, import App from './App'; will automatically resolve to App.js or App.jsx.

Plugins

• HtmlWebpackPlugin(template: './public/index.html') – Specifies the HTML file template. The plugin will generate an HTML file and inject the bundled JavaScript into it, ensuring everything is set up correctly for the browser.

DevServer

• static: path.resolve(__dirname, 'dist') – Tells Webpack DevServer where the static files (the bundled output) are located.
• port: 3000 – Defines the port number the development server will run on. You can access your app in the browser at http://localhost:3000.
• open: true – Opens the default browser automatically when the server starts.
• hot: true – Enables Hot Module Replacement (HMR), allowing the browser to update changed modules without reloading the entire page. This improves the development experience by applying changes instantly.

Mode

• mode: 'development' – Specifies the build mode. In development, Webpack provides helpful debugging features, and the build process is faster.
• When switching to production, Webpack optimizes the build by minifying the code, removing unused code, and more.

Why This Configuration Is Needed

This Webpack configuration ensures that:

• Your React JSX files are transpiled using Babel.
• CSS is processed and injected correctly.
• Your code is bundled and served with live updates during development (thanks to webpack-dev-server).
• The output is optimized for development and easily configurable for production when you’re ready to deploy.

Step 5: Create Folder Structure

Create your folders and files like this:

my-react-webpack-app/
├── public/
│   └── index.html
├── src/
│   └── index.jsx
├── webpack.config.js
├── .babelrc
└── package.json

Step 6: Write HTML Template (public/index.html)

This HTML template will serve as the foundation for your React application. Webpack will use this template to generate the final HTML file and inject the JavaScript bundle into it.

Create the public/index.html File

In the public folder, create an index.html file with the following content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React Webpack App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Why This File Is Necessary

• Webpack bundling: Webpack, using the HtmlWebpackPlugin, automatically injects the final JavaScript bundle (bundle.js) into this HTML template. You don't have to manually update the HTML file each time you make changes to your app.
• React mounting: The <div id="root"></div> is critical because it's the DOM element where your React app gets rendered. React will use ReactDOM.render(<App />, document.getElementById('root')) to mount the root component into this div.

By keeping the structure simple and focused, this file is a straightforward but essential part of your Webpack and React setup.

Step 7: Create React Entry File (src/index.jsx)

import React from 'react';
import { createRoot } from 'react-dom/client';
const App = () => <h1>Hello, Webpack + React!</h1>;
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App ></App>);

Step 8: Add Scripts to package.json

In this step, you'll add custom scripts to your package.json to easily run your development server and build process.

Update the scripts Section in package.json

In your package.json file, under the "scripts" section, add the following lines:

"scripts": {
  "start": "webpack serve --config webpack.config.js",
  "build": "webpack --config webpack.config.js"
}

Explanation

• "start": "webpack serve --config webpack.config.js" – This script runs the development server. When you run npm start (or yarn start if you use Yarn), Webpack will start the webpack-dev-server from your webpack.config.js. and serve the application on a local server, typically accessible at http://localhost:3000.
• "build": "webpack --config webpack.config.js" – This script is used to create an optimized production build. When you run npm run build (or yarn build if you're using Yarn), Webpack will bundle your JavaScript, CSS, and other assets, minify the code, and apply optimizations like dead-code elimination, making the app faster and smaller for production.

Step 9: Run Your App

Start the development server:

npm start

Visit http://localhost:3000 and you’ll see:

Hello, Webpack + React!

Conclusion

In this guide, we've successfully set up a React app using webpack from scratch. By manually configuring webpack, we’ve learned how it bundles our code, handles modern JavaScript and JSX with Babel, and includes styles in the final build.