Webpack 5 Boilerplate

A modern, production-ready Webpack 5 boilerplate with Tailwind CSS v4, hot module replacement, and optimized build configuration. Perfect for quickly starting new frontend projects with best practices built-in.

Features

• Webpack 5 - Latest webpack with optimal configuration
• Tailwind CSS v4 - Latest Tailwind with PostCSS integration
• Hot Module Replacement - Instant updates during development
• Code Splitting - Automatic vendor and runtime chunk splitting
• Production Optimization - Minification, content hashing, and tree shaking
• Asset Management - Built-in handling for images, fonts, and other assets
• ES Modules - Modern JavaScript module system
• Responsive Ready - Mobile-first approach with Tailwind CSS
• Clean Output - Automatic dist folder cleanup on build
• Source Maps - Development and production source map support

Quick Start

1. Clone or download this repository

git clone <your-repo-url> my-project
cd my-project

2. Install dependencies

npm install

3. Start development server

npm run dev

The development server will automatically open at http://localhost:8080 with hot module replacement enabled.

Available Scripts

Command	Description
npm run dev	Start development server with HMR on port 8080
npm run build	Create optimized production build in dist/
npm run build:dev	Create development build without optimization
npm run watch	Watch for changes and rebuild automatically
npm run clean	Remove the dist/ directory

Building for Production

Run the build command to create an optimized production bundle:

npm run build

This will:

• Minify JavaScript and CSS
• Add content hashes to filenames for cache busting
• Split vendor code into separate chunks
• Generate source maps
• Optimize assets and compress output

The production files will be in the dist/ directory, ready to deploy.

Configuration

Webpack

The webpack configuration (webpack.config.js) includes:

• Development mode: Fast rebuilds with eval-source-map
• Production mode: Optimized builds with content hashing
• Code splitting: Vendor and runtime chunks separated
• Asset optimization: Images and fonts with hash filenames
• Dev server: Port 8080 with hot reload and history API fallback

PostCSS

PostCSS is configured with Tailwind CSS v4 (postcss.config.mjs). You can add additional PostCSS plugins as needed.

Customization

Change Dev Server Port

Edit webpack.config.js:

devServer: {
  port: 3000, // Change to your preferred port
  // ...
}

Acknowledgments

• Webpack - Module bundler
• Tailwind CSS - Utility-first CSS framework
• PostCSS - CSS transformation tool

---

Happy coding!

Start building your next project with this boilerplate and focus on what matters - your application logic!