Webpack 5 + React 18 Hello World

A basic starter project demonstrating a minimal setup with Webpack 5, React 18, and Babel.

Features

• ⚡️ Webpack 5 with HMR (Hot Module Replacement)
• ⚛️ React 18 with the new createRoot API
• 🎨 CSS support with style-loader and css-loader
• 🔄 Babel transpilation with modern presets
• 🚀 Development server with automatic browser opening
• 📦 Production build optimization

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Installation

1. Install dependencies:

   npm install

Development

Start the development server:

npm start

This will start the webpack dev server at http://localhost:3000 and automatically open your browser.

Building for Production

Create a production build:

npm run build

The production files will be generated in the dist/ directory.

Project Structure

├── src/
│   ├── index.js          # Application entry point
│   ├── App.jsx           # Main React component
│   ├── App.css           # Component styles
│   └── index.html        # HTML template
├── dist/                 # Production build output
├── webpack.config.js     # Webpack configuration
├── babel.config.js       # Babel configuration
├── package.json          # Dependencies and scripts
└── README.md            # This file

Available Scripts

• npm start - Start development server with HMR
• npm run dev - Start development server without auto-opening browser
• npm run build - Create production build

Configuration

Webpack

The webpack configuration includes:

• Entry point: src/index.js
• Output: dist/bundle.js
• Development server on port 3000
• Hot Module Replacement enabled
• CSS loading support

Babel

Configured with:

• @babel/preset-env for modern JavaScript
• @babel/preset-react with automatic runtime for JSX

License

MIT