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

Screenshots

Hot Module Replacement (HMR) Support

Error Overlay and Friendly Error Display

Auto-Reload for Background in Chrome extension development

Auto-Reload for Content Scripts in Chrome extension development

Features

Fully customizable webpack-based building system.
Support webpack 5, React 18, TypeScript, Sass, Less, Tailwind CSS, etc.
Support Hot Module Replacement (HMR).
Support Auto Reload for Background and Content Script in Chrome extension development.
Support manifest V3 in Chrome extension development.
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;
Edit utils/env.js and update the configuration field NOT_HOT_RELOAD to determine which entries to be excluded from Hot Module Replacement (HMR);
If you are working with Chrome extensions, also:
- Update configuration field CONTENT_SCRIPT and BACKGROUND to match the entries of Content Scripts and Background respectively.

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 the top-level file. Components in the top-level file will be downgraded to live reload.

Auto-Reload

Remember to keep the DevTool panel of the Background service worker open during development, otherwise Auto-Reload may not work as expected.

See here for more details.

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

tjx666/awesome-chrome-extension-boilerplate
lxieyang/chrome-extension-boilerplate-react
Icons made by Freepik from www.flaticon.com

JoaoAntonioMaruti / auto-from-chrome-extension