Webpack Boilerplate

A good starting point for using webpack to build stuffs.

Compatibility

Tested on both Windows and macOS, with:

• Node = 16.15.1
• Yarn = 3.2.4

Features

• Fully customizable webpack-based building system.
• Support webpack 5, React 18, TypeScript, Sass, Less, Tailwind CSS, etc.
• Support Hot Module Replacement (HMR).
• Support ESLint, stylelint, and Prettier.
• Support husky, lint-staged, and commitlint.

How to Use

1. Update Configurations

• Edit webpack.config.js and update the configuration field entry to determine what to be built;

2. CLI Commands

# Install dependencies
yarn install

# Start dev server
yarn run start

# Build application
yarn run build

# Commit
yarn commit

# Release
yarn release

Hot Module Replacement (HMR)

To use Hot Module Replacement, please place components outside of the top-level file. Components in the top-level file will be downgraded to live reload.

Class Names in CSS-Modules

CSS's naming convention requires the class names to be in kebab-case. However, in JavaScrip, it is not allowed to write style.my-style and only accepts style['my-style'] or style.myStyle. It is not convenient. Therefore, in this boilerplate, the class names in css-modules will be converted from kebab-case to camelCase to allow usages such as style.myStyle.

Credits

• Icons made by Freepik from www.flaticon.com