Webpack Build Pipelines

Relevant source files

The following files were used as context for generating this wiki page:

• config/webpack.common.js
• config/webpack.dev.js
• config/webpack.prod.js
• webpack.config.js
• scripts/verify-build.js
• package.json

The Webpack Build Pipelines in MarketSage manage the transformation of source code into a functional Chrome extension. The system utilizes a modular configuration strategy, separating common build logic from environment-specific optimizations for development and production. This ensures that the background scripts, content scripts, and popup interfaces are correctly bundled and optimized for their respective browser environments.

The pipeline is integrated with a pre-build verification system that validates project integrity—checking for required dependencies, configuration files, and manifest requirements—before the bundling process begins.

Architecture and Build Flow

The build process follows a hierarchical structure where environment-specific configurations are merged with a base configuration using webpack-merge. This allows for a DRY (Don't Repeat Yourself) approach to configuration management.

Build Orchestration Flow

The following diagram illustrates the sequence from the initial command to the final distribution output.

Core Components

Entry Points and Output

The pipeline defines three primary entry points corresponding to the Chrome extension architecture:

• Popup: The user interface displayed when the extension icon is clicked (src/popup/index.tsx).
• Background: The persistent service worker or script handling extension events (src/background/index.ts).
• Content: The script injected into web pages (src/content/index.ts).

The output is directed to the dist directory, which is cleaned before every build to ensure no stale assets remain.

Sources: config/webpack.common.js:5-10, webpack.config.js:5-14

Module Transformation Rules

Webpack uses specific loaders to process different file types within the project:

File Type	Loader / Plugin	Purpose
.ts, .tsx	ts-loader	Transpiles TypeScript and React JSX into JavaScript.
.css	style-loader, css-loader	Injects CSS into the DOM and resolves @import and url().
Images	asset/resource	Manages image assets (png, jpg, jpeg, gif, svg).

Sources: config/webpack.common.js:12-28, webpack.config.js:15-26

Environment Pipelines

Production Pipeline

The production pipeline focuses on performance and security. It enables minification and implements a sophisticated chunk splitting strategy to optimize load times.

• Minification: Code is minimized to reduce file size.
• Source Maps: Uses source-map for debugging in production without bloating the main bundles.
• Code Splitting: Splits node_modules into a separate vendor chunk to leverage browser caching.

Sources: config/webpack.prod.js:4-33, config/webpack.common.js:63-68

Development Pipeline

The development pipeline is optimized for developer experience and iteration speed.

• Mode: Set to development.
• Source Maps: Uses inline-source-map for faster builds and accurate debugging.
• Watching: Enables watchOptions to ignore node_modules and recompile quickly on file changes.

Sources: config/webpack.dev.js:4-10

Pre-Build Verification

MarketSage includes a mandatory verification script (scripts/verify-build.js) that runs via the prebuild hook in package.json. This script performs the following checks:

1. Dependency Validation: Ensures react, react-dom, rxjs, and @tensorflow/tfjs are present.
2. Config Integrity: Validates package.json, tsconfig.json, and manifest.json.
3. Path Verification: Confirms essential files like StateManager.ts and ErrorHandler.ts exist.
4. Manifest Compliance: Verifies that required Chrome extension fields and permissions are defined.

Build Configuration Summary

Feature	Development	Production
Devtool	inline-source-map	source-map
Minimize	False	True
Clean Output	True	True
Watch Mode	Supported (--watch)	Not used
Splitting	vendor chunk	all chunks, minSize: 20000

Sources: config/webpack.dev.js, config/webpack.prod.js, config/webpack.common.js

The Webpack Build Pipeline provides a robust foundation for MarketSage, ensuring that the complex interactions between AI models (TensorFlow), reactive streams (RxJS), and the Chrome extension API are correctly bundled for both rapid development and optimized production deployment.