thomaswhite / webpack-boilerplate

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 = 1.22.19

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

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.

CLI Commands

# Install dependencies
yarn install

# Start dev server
yarn run start

# Build the application
yarn run build

Notes

About 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.

Known Issue

When devMiddleware.writeToDisk option of webpack-dev-server is enabled, Hot Module Replacement will not work properly and will downgrade to live reload. However, in Chrome extension development, the devMiddleware.writeToDisk option is required for Chrome to properly load the extension. It means that Hot Module Replacement will barely work.

About 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.

Credits

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