Webpack 5 Boilerplate

React 18, Typescript

ESLint, Jest, RTL, Storybook 7

Tech stack:

• React 18
• Webpack 5
• TypeScript
• ESLint
• Prettier
• Stylelint
• Babel
• Jest
• RTL
• Storybook 7

Config

The app uses absolute path with alias '@'

import App from '@/app/App' // import App.tsx file

Also, strict mode is included. In order to initially monitor the high quality of the code.

Installation

Requires Node.js v18+ to run.

Install the dependencies and devDependencies.

npm i

Usage

Development server

webpack-dev-server

npm run start

You can view the development server at localhost:3000.

Development build

To make not minified compiled bundle with devs feature.

npm run build:dev

Production build

To make minified compiled bundle without devs feature.

npm run build:prod

Linting

ESLint

npm run lint:ts
npm run lint:ts:fix

Stylelint

npm run lint:scss
npm run lint:scss:fix

Prettier

npm run prettier

Testing

Unit test - Jest

npm run test:unit

Storybook

npm run storybook # to start storybook
npm run storybook:build # to compile in static

Dependencies

webpack

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server for webpack

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/preset-env - Smart defaults for Babel
• @babel/preset-typescript - Babel preset for TypeScript
  • • @babel/plugin-transform-typescript - Includes in @babel/preset-typescript
• @babel/plugin-transform-runtime - A plugin that enables the re-use of Babel's injected helper code to save on codesize.

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
  • sass - Node Sass
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM

Plugins

• html-webpack-plugin - Generate HTML files from template
• react-refresh-webpack-plugin - To enable "Fast Refresh" for React components.
• webpack-bundle-analyzer - Visualize size of webpack output files with an interactive zoomable treemap
• mini-css-extract-plugin - Extract CSS into separate files

Linters

• prettier - Formatting to support a consistent code style
• eslint - Enforce styleguide across application
• eslint-plugin-unused-imports - Find and remove unused ES6 module imports
• eslint-plugin-import - Support linting of ES6+ import/export syntax
• eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements
• eslint-plugin-promise - Enforce best practices for JavaScript promises
• eslint-plugin-react - React-specific linting rules
• eslint-plugin-react-hooks - Enforces the Rules of Hooks
• eslint-plugin-storybook - Best practice rules for Storybook

Author

• Nik Mihalevich

License

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