React Webpack5 Boilerplate

Webpack5 boilerplate using React, TypeScript, Babel 7, PostCSS and Sass with a hot dev server and an optimized production build. Babel compiles TypeScript to ES5.

The Webpack plugin eslint-webpack-plugin does the type checking. It is possible to use both React with JS in .jsx files and React with TS in .tsx files. Except from the main index.js and the webpack files the modules are ready in jsx and tsx.

Usage

Installing

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

Development server

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

Production build

• pnpm run build

To view the build use http-server

• pnpm run prod

Features

• webpack
• React
• TypeScript
• Babel
• Sass
• PostCSS
• Husky
• CommitLint

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-corejs3 - Babel Runtime for dev babel/plugin-transform-runtime.

devDependencies

TypeScript

• typescript - TypeScript by NPM
• @babel/preset-typescript - Babel TypeScript
• @types/react - Typechecking React
• @types/react-dom - Typechecking React Dom

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-loader - Transpile files - Babel/webpack

• sass-loader - Load SCSS and compile to CSS

• postcss-loader - Process CSS with PostCSS

• postcss-preset-env - Default for PostCSS

• css-loader - Resolve CSS imports

• style-loader - Inject CSS into the DOM

• @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

Plugins

• eslint-webpack-plugin Handles the TypeScript type checking
• 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
• path - Node Path moule

Author

• Lorain

License

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