Setting Up React with Webpack and babel from Scratch

If you're starting a React project from scratch and want full control over your setup, using Webpack is a great option. In this guide, we'll go step by step to configure Webpack and integrate React, Babel, CSS, and assets properly. Step 1: Initialize the Project First, create a Node.js project and install the necessary dependencies: npm init -y Then, install React and Webpack: npm install react react-dom webpack webpack-cli webpack-dev-server Next, create essential project files: touch index.js index.html Step 2: Basic React Setup Inside index.js, set up a basic React component and render it inside a div with id="root": import React from "react"; import ReactDOM from "react-dom"; const App = () => Hello, Webpack with React!; ReactDOM.render(, document.getElementById("root")); Create a simple index.html: React Webpack Setup Step 3: Webpack Configuration Create a webpack.config.js file. Webpack needs an entry file, an output path, and a filename for the bundled JavaScript: const path = require("path"); module.exports = { entry: "./index.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", }, }; Step 4: Adding Babel Support Webpack works with loaders and plugins. Loaders tell Webpack how to process different file types. To compile JSX, we need Babel. Install Babel dependencies: npm install @babel/core @babel/preset-env @babel/preset-react babel-loader Then, update webpack.config.js to include Babel in module rules: module.exports = { module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: "babel-loader", }, ], }, }; Next, create a .babelrc file to configure Babel: { "presets": ["@babel/preset-env", "@babel/preset-react"] } Step 5: Setting Up Webpack Dev Server To serve our React application, we need webpack-dev-server. Modify webpack.config.js to add a development server: module.exports = { devServer: { static: path.join(dirname, "dist"), compress: true, port: 3000, }, }; Update package.json with scripts to start and build the project: "scripts": { "start": "webpack serve --open", "build": "webpack" } Now, run: npm start Your React app should open in the browser. Step 6: HTML Template with Webpack Plugin By default, Webpack does not generate an index.html file. We use html-webpack-plugin to create one with our bundle script linked. We will use the template option from the plugin to link to our index.html file we have created in the beginning. Install the plugin: npm install --save-dev html-webpack-plugin Modify webpack.config.js: const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { plugins: [ new HtmlWebpackPlugin({ template: path.resolve(dirname, "index.html"), }), ], }; Now, index.html will automatically include our bundled script. Step 7: Adding CSS Support Webpack does not process CSS files by default. To allow this, install the necessary loaders: npm install style-loader css-loader Now, update webpack.config.js to include rules for handling CSS: we need both these loader since style-loader is to use the css in the bundle and css-loader is for webpack to understand how to process the css. module.exports = { module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, ], }, }; To apply CSS, create a styles.css file and import it inside index.js: body { font-family: Arial, sans-serif; background-color: #f4f4f4; } Then, import it in index.js: import "./styles.css"; Step 8: Handling Assets (Images, SVGs) To use images in our project, we need Webpack to process them. Update webpack.config.js: module.exports = { module: { rules: [ { test: /\.(png|jpg|jpeg|svg)$/i, type: "asset/resource", }, ], }, }; Now, you can import and use images in your components: import logo from "./logo.png"; Step 9: Resolving File Extensions By default, Webpack requires file extensions when importing modules. To simplify imports, add the following to webpack.config.js: resolve: { extensions: [".js", ".jsx"], }, This allows us to import files without specifying .js or .jsx: import Component from "./Component"; Conclusion Now, you have a fully functional React setup with Webpack, Babel, CSS, and asset handling. This step-by-step approach ensures you understand each configuration.

Mar 31, 2025 - 21:17

Setting Up React with Webpack and babel from Scratch

If you're starting a React project from scratch and want full control over your setup, using Webpack is a great option. In this guide, we'll go step by step to configure Webpack and integrate React, Babel, CSS, and assets properly.

Step 1: Initialize the Project

First, create a Node.js project and install the necessary dependencies:

npm init -y

Then, install React and Webpack:

npm install react react-dom webpack webpack-cli webpack-dev-server

Next, create essential project files:

touch index.js index.html

Step 2: Basic React Setup

Inside index.js, set up a basic React component and render it inside a div with id="root":

import React from "react";
import ReactDOM from "react-dom";

const App = () => <h1>Hello, Webpack with React!h1>;

ReactDOM.render(<App />, document.getElementById("root"));

Create a simple index.html:


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>React Webpack Setup<span class="nt">


     id="root">

Step 3: Webpack Configuration

Create a webpack.config.js file. Webpack needs an entry file, an output path, and a filename for the bundled JavaScript:

const path = require("path");

module.exports = {
    entry: "./index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },
};

Step 4: Adding Babel Support

Webpack works with loaders and plugins. Loaders tell Webpack how to process different file types. To compile JSX, we need Babel.

Install Babel dependencies:

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader

Then, update webpack.config.js to include Babel in module rules:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
        ],
    },
};

Next, create a .babelrc file to configure Babel:

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

Step 5: Setting Up Webpack Dev Server

To serve our React application, we need webpack-dev-server.

Modify webpack.config.js to add a development server:

module.exports = {
    devServer: {
        static: path.join(__dirname, "dist"),
        compress: true,
        port: 3000,
    },
};

Update package.json with scripts to start and build the project:

"scripts": {
  "start": "webpack serve --open",
  "build": "webpack"
}

Now, run:

npm start

Your React app should open in the browser.

Step 6: HTML Template with Webpack Plugin

By default, Webpack does not generate an index.html file. We use html-webpack-plugin to create one with our bundle script linked. We will use the template option from the plugin to link to our index.html file we have created in the beginning.

Install the plugin:

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

Modify webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "index.html"),
        }),
    ],
};

Now, index.html will automatically include our bundled script.

Step 7: Adding CSS Support

Webpack does not process CSS files by default. To allow this, install the necessary loaders:

npm install style-loader css-loader

Now, update webpack.config.js to include rules for handling CSS: we need both these loader since style-loader is to use the css in the bundle and css-loader is for webpack to understand how to process the css.

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
};

To apply CSS, create a styles.css file and import it inside index.js:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

Then, import it in index.js:

import "./styles.css";

Step 8: Handling Assets (Images, SVGs)

To use images in our project, we need Webpack to process them. Update webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|svg)$/i,
                type: "asset/resource",
            },
        ],
    },
};

Now, you can import and use images in your components:

import logo from "./logo.png";

Step 9: Resolving File Extensions

By default, Webpack requires file extensions when importing modules. To simplify imports, add the following to webpack.config.js:

resolve: {
    extensions: [".js", ".jsx"],
},

This allows us to import files without specifying .js or .jsx:

import Component from "./Component";

Conclusion

Now, you have a fully functional React setup with Webpack, Babel, CSS, and asset handling. This step-by-step approach ensures you understand each configuration.