Webpack 5 boilerplate

Features

Webpack 5 boilerplate with support of most common loaders and modules:

• Webpack 5
  • html template
  • imports images, fonts.
  • sass, css modules with automatic typescript declaration
  • postcss loader
  • generates source maps for development.
  • Dev and Prod config
  • Bundle analyzer
  • Suppor for enviroment variables
• Babel
  • preset-env
  • preset react
  • babel/preset-typescript
• React
  • new JSX transform (no need to import react for using jsx)
  • with react support (also with react-refresh)
• Typescript support
• Prettier
• Webpack dev server
• Husky prehooks for prettier format and lint with lint-staged
• eslint config:
  • eslint:recommended
  • react-hooks/recommended
  • eslint-config-prettier
  • typescript-eslint/recommended
  • testing-library/react
  • jest-dom/recommended
• Jest config:
  • js-dom
  • testing-library/jest-dom/extend-expect
  • indentity-obj-proxy for css modules
  • jest typehead plugin

Instalation

Click on the Use this template green button at the top - this will make a new github repo with clean commit history. Then clone it and install dependencies:

npm i

Usage

Development server

npm start

You can view the development server at localhost:8080.

Production build

npm run build:prod

Production files goes to /dist folder

Production dev

npm run build:dev

Production files goes to /dist folder

Bundler Analyzer

npm run build:perf

helps to inspect the bundle

Author

• Ramon Ruiz

License

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