📄 React Webpack 5 Template

📜 Webpack 5 template with React 18 using Babel 7, HMR, Sass and PostCSS with a hot dev server and an optimized production build.

Installation

Clone this repository and npm install:

git clone https://github.com/B4rt0sz/react-webpack-5-template.git
cd react-webpack-5-template
npm install

Alternative:

Use the green Template Button on top right of this repository.

Remember:

add .env.development and .env.production to your .gitignore!

Usage

Development server

npm start

You can view the development server at localhost:8080 (You can change port in ./config/webpack.dev.js).

Production build

npm run build

Features

• Webpack 5
• React 18
• Babel 7
• Sass
• PostCSS
• Prettier
• ESLint

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

Babel

• @babel-runtime - Contains Babel modular runtime helpers

devDependencies

webpack

• webpack - Module and asset bundler
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server for webpack
• webpack-merge - Simplify development/production configuration

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/preset-env - Smart defaults for Babel
• @babel/preset-react - Babel preset for all React plugins
• @babel/plugin-transform-runtime - Enables the re-use of Babel's injected helper code to save on codesize

Loaders

• babel-loader - Transpile files with Babel and webpack
• css-loader - Resolve CSS imports
• node-sass - Node Sass
• postcss-loader - Loader to process CSS with PostCSS
• postcss-preset-env - Sensible defaults for PostCSS
• sass-loader - Load SCSS and compile to CSS
• style-loader - Inject CSS into the DOM

Plugins

• 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
• react-refresh - HMR using React Fast Refresh
• @pmmmwh/react-refresh-webpack-plugin - Dependency for react-refresh-webpack-plugin plugin
• copy-webpack-plugin - Copies individual files or entire directories, which already exist, to the build directory
• dotenv-webpack - Supports dotenv and other environment variables
• image-minimizer-webpack-plugin - Plugin and Loader to optimize (webp 90%) all images using sharp

Linters

• eslint - Enforce styleguide across application
• @babel/eslint-parser - Lint ALL valid Babel code with the ESLint
• eslint-config-prettier - Implment prettier rules
• eslint-plugin-import - Implment import rules
• eslint-import-resolver-alias - Simple Node.js module import resolution plugin for eslint-plugin-import
• @babel/eslint-plugin - Companion rules for @babel/eslint-parser
• eslint-plugin-prettier - Runs Prettier as an ESLint rule
• eslint-plugin-react - React specific linting rules for ESLint
• eslint-plugin-react-hooks - ESLint plugin enforces the Rules of Hooks
• prettier - Prettier is an opinionated code formatter

Author

Bartosz Szućko

License

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