DEV Community

Naveen prasad Sugadevan
Naveen prasad Sugadevan

Posted on

Setting Up React with Webpack and babel from Scratch

#webdev #webpack #babel #react

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
Enter fullscreen mode Exit fullscreen mode

Then, install React and Webpack:

npm install react react-dom webpack webpack-cli webpack-dev-server
Enter fullscreen mode Exit fullscreen mode

Next, create essential project files:

touch index.js index.html
Enter fullscreen mode Exit fullscreen mode

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"));
Enter fullscreen mode Exit fullscreen mode

Create a simple index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Webpack Setup</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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",
    },
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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

Next, create a .babelrc file to configure Babel:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
Enter fullscreen mode Exit fullscreen mode

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,
    },
};
Enter fullscreen mode Exit fullscreen mode

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

"scripts": {
  "start": "webpack serve --open",
  "build": "webpack"
}
Enter fullscreen mode Exit fullscreen mode

Now, run:

npm start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Modify webpack.config.js:

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

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

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
Enter fullscreen mode Exit fullscreen mode

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"],
            },
        ],
    },
};
Enter fullscreen mode Exit fullscreen mode

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

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

Then, import it in index.js:

import "./styles.css";
Enter fullscreen mode Exit fullscreen mode

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",
            },
        ],
    },
};
Enter fullscreen mode Exit fullscreen mode

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

import logo from "./logo.png";
Enter fullscreen mode Exit fullscreen mode

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"],
},
Enter fullscreen mode Exit fullscreen mode

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

import Component from "./Component";
Enter fullscreen mode Exit fullscreen mode

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. 🎉 Happy coding!

Checkout my github repo for the code discussed
[https://github.com/Naveenprasad59/How-to-create-ReactApp-from-Scratch/tree/master]

Top comments (2)

Collapse
 
webdiscus profile image
webdiscus •

Instead of html-webpack-plugin can be used modern html-bundler-webpack-plugin.
This plugin treats an HTML template as the entry point, so your source script and style files can be specified directly in HTML.

Try a simple example React Hello World with Webpack.

Collapse
 
frontendbytes profile image
Naveen prasad Sugadevan •

@webdiscus i am looking into this package and the PR you raised, Thanks for commenting here and for the PR.