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