DocumentationWebpack Configuration

Webpack Configuration

The build system uses a customized Webpack configuration optimized for browser extension development. This guide explains the key aspects of the build system.

Overview

The webpack configuration handles:

  • TypeScript and React compilation
  • CSS processing
  • SVG handling
  • Code splitting
  • Development and production builds
  • Extension-specific file copying

Entry Points

The build system handles three main types of entry points:

{
  background: webpack.EntryObject;    // Background scripts
  contentScript: webpack.EntryObject;  // Content scripts
  extensionPage: webpack.EntryObject;  // Extension pages
}

Development Mode

In development mode (npm run dev), the build system provides:

  • Source maps for easier debugging
  • File system caching for faster rebuilds
  • Hot reload support for extension components
  • Automatic copying of manifest and HTML files
  • Development-specific optimizations

Auto Reload

When auto reload is enabled, three plugins work together to provide seamless development:

  • ReloadBackgroundPlugin: Reloads background scripts
  • ReloadContentPlugin: Reloads content scripts
  • ReloadPagePlugin: Reloads extension pages

Production Mode

In production mode (npm run build), the build system enables:

  • Code minification and optimization
  • Deterministic module IDs
  • Separate source maps
  • Production-level code splitting
  • Performance hints

File Processing

TypeScript and React

{
  test: /\.(ts|tsx)$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env',
        '@babel/preset-typescript',
        ['@babel/preset-react', { runtime: 'automatic' }]
      ]
    }
  }
}

CSS

CSS files are processed using:

  • style-loader: Injects styles into the DOM
  • css-loader: Handles CSS imports and modules

SVG

SVG files are automatically converted to React components using @svgr/webpack.

Extension-specific Plugins

The build system includes several custom plugins for browser extension development:

CopyManifestPlugin

Processes and copies the manifest.json file:

  • Fills in missing fields from package.json
  • Updates file extensions for TypeScript/React files
  • Validates manifest structure

CopyHtmlPlugin

Handles HTML files:

  • Copies HTML files from project root
  • Updates script tag extensions for TypeScript/React files

CopyPngManifestPlugin and CopyPngHtmlPlugin

Handle PNG assets:

  • Copy PNG files referenced in manifest.json
  • Copy PNG files referenced in HTML files

CopyWebAccessibleResourcesPlugin

Handles web accessible resources:

  • Processes the web_accessible_resources field in manifest.json
  • Copies matched files to the build directory
  • Maintains directory structure of copied files

Code Splitting

Code splitting behavior differs between development and production:

  • Development: Splitting is minimized for faster builds
  • Production: Chunks are split when they exceed 20KB for optimal loading

Performance

  • Development mode disables performance hints for faster builds
  • Production mode enables warnings for large chunks
  • Both modes use filesystem caching for improved build times
Utility Functions
@browser-ext