Webpack 5 React TypeScript Starter

Simple Webpack 5 React TypeScript Starter. It contains:

• React 18 (v18.2.0)
• Latest Webpack 5 (v5.79.0) and Webpack Dev Server 4 (v4.13.2) with Scope Hoisting enabled
• TypeScript 5 (v5.0.4)
• Babel 7
• ECMAScript 6+ and JSX support
• Fast Refresh
• Production config
• Export separate vendor and runtime files
• Sass/SCSS support
• Separate CSS stylesheets generation
• ES6 linting with continuous linting on file change
• Stylelint
• Prettier
• Linting files and commit messages on commit
• SVG and image files support
• Commitizen
• Webpack Bundle Analyzer

Prerequisites

• Node (Make sure you have the node 12+ installed)

Getting Started

1. Clone the repository gh repo clone piotrlewandowski/webpack-5-react-typescript-starter (or if you're not using GitHub CLI: git clone git@github.com:piotrlewandowski/webpack-5-react-typescript-starter.git)
2. If you're using NVM run nvm use inside project directory to use node version set in .nvmrc file
3. Run yarn install to install all the dependencies
4. To begin development task, run yarn start
5. Open http://localhost:8080

Available commands

• yarn clean - delete the dist folder
• yarn start - start the dev server and watch for changes
• yarn build - create a production ready build in dist folder
• yarn profile - generate interactive treemap visualization of the contents of the bundle
• yarn eslint:check - execute eslint check
• yarn eslint:fix - execute eslint check and automatically fix problems
• yarn stylelint:check - execute stylelint check
• yarn stylelint:fix - execute stylelint check and automatically fix problems