Webpack 5 React Boilerplate

Webpack 5 boilerplate using React, Babel 7, PostCSS and Sass with a hot dev server and an optimized production build. Babel compiles ES6+ and React to ES5.

Last updated: 07-01-2025

Node Version: 20.18.1

React Version: 19.0.0

Usage

Installing

Make sure you have a new version of Node installed
Download the code by zip or fork
Run the command npm install by the command promt

Development server:

npm run start
You can view the development server at localhost:8080.

Production build:

npm run build

To view the build use http-server:

npm run prod

Features

Dependencies

React

react - React is a JavaScript library for creating user interfaces. For creating React components.
react-dom - This package serves as the entry point to the DOM and server renderers for React.
react-router-dom - This package serves as DOM for React Router.
react-hook-form - Forms in Reack.

Babel

@babel-runtime - Babel Runtime for dev babel/plugin-transform-runtime.

Other

core-js - Main Library with polyfills for older Browsers
whatwg-fetch - For making promise based web request progammitically

devDependencies

webpack

webpack - Module and asset bundler.
webpack-cli - Command line interface for webpack
webpack-dev-server - Development server for webpack
webpack-merge - Simplify dev/prod configuration

Loaders

Babel

@babel/core - Transpile ES6+ to ES5
@babel/preset-env - Smart defaults for Babel
@babel/preset-react - Defaults Babel React
@babel/plugin-transform-runtime - Babel to use async/await
@babel/plugin-proposal-object-rest-spread - Babel helper
@babel/plugin-transform-arrow-functions - For arrow functions
@babel/plugin-transform-async-to-generator - Generator for async/await
@babel/plugin-proposal-class-properties - Use properties on a class

Plugins

clean-webpack-plugin - Remove/clean build folders
copy-webpack-plugin - Copy files to build directory
html-webpack-plugin - Generate HTML files from template
mini-css-extract-plugin - Extract CSS into separate files
css-minimizer-webpack-plugin - Optimize and minimize CSS assets
cross-env - Cross platform configuration
path - Node Path moule
http-server - HTTP server for testing the produktion build by running npm run prod

Author

Per Olsen

License

This project is open source and available under the MIT License.

LearningBackwards/webpack-5-react-boilerplate-2

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages