Webpack 5 React TypeScript Boilerplate

Webpack 5 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 fork-ts-checker-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 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

• webpack
• React
• TypeScript
• Babel
• Sass
• PostCSS

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

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
• node-sass - Node Sass
• 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

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

• fork-ts-checker-webpack-plugin Handles the TypeScript type checking
• 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.