Configuration System

Webpack configuration generation and customization system that integrates with Storybook's preset system, supporting framework-specific configurations, custom webpack configurations, and comprehensive asset handling.

Capabilities

Get Configuration

Generates complete webpack configuration from Storybook options and presets.

/**
 * Generates webpack configuration from Storybook options and presets
 * @param options - Storybook configuration options with presets and framework settings
 * @returns Promise resolving to webpack Configuration object
 */
function getConfig(options: Options): Promise<Configuration>;

interface Options {
  /** Babel configuration options */
  babelOptions: any;
  /** TypeScript configuration options */
  typescriptOptions: any;
  /** Preset manager for applying configuration transformations */
  presets: PresetApi;
  /** Target framework (react, vue, angular, etc.) */
  framework: string;
  /** Build configuration type */
  configType: 'DEVELOPMENT' | 'PRODUCTION';
  /** Output directory for built files */
  outputDir?: string;
  /** Storybook configuration directory */
  configDir: string;
  /** Package.json contents */
  packageJson: any;
  /** Enable quiet mode for reduced logging */
  quiet?: boolean;
  /** Preview URL for iframe */
  previewUrl?: string;
  /** Modern build flag */
  modern?: boolean;
  /** Feature flags */
  features?: Record<string, boolean>;
  /** Server channel URL */
  serverChannelUrl?: string;
  /** Custom webpack configuration function */
  webpackConfig?: (config: Configuration) => Configuration;
  /** Debug webpack flag for detailed output */
  debugWebpack?: boolean;
  [key: string]: any;
}

Usage Examples:

import { getConfig } from "@storybook/builder-webpack4";
import type { Options } from "@storybook/core-common";

const storybookOptions: Options = {
  configType: 'DEVELOPMENT',
  outputDir: './storybook-static',
  configDir: '.storybook',
  framework: 'react',
  babelOptions: {
    presets: ['@babel/preset-env'],
  },
  typescriptOptions: {
    transpileOnly: true,
  },
  presets: presetManager,
  packageJson: require('./package.json'),
};

const webpackConfig = await getConfig(storybookOptions);
console.log('Generated webpack config:', webpackConfig);

Configuration Features

Asset Handling

The configuration system provides comprehensive asset handling:

• JavaScript/TypeScript: Babel compilation with framework-specific extensions
• CSS Processing: Style-loader and css-loader with PostCSS support
• File Assets: File-loader for images, fonts, and other static assets
• URL Assets: URL-loader for small assets with base64 inlining

Framework Integration

Framework-specific configurations are supported through:

• Preset System: Framework-specific presets can modify webpack configuration
• TypeScript Support: Automatic TypeScript handling for compatible frameworks
• File Extensions: Framework-appropriate file extension handling
• Framework Options: Framework-specific options integration

Development vs Production

Different configurations for development and production modes:

• Development: Hot module replacement, webpack-dev-middleware, source maps
• Production: Minification with Terser, optimized asset handling, chunk splitting
• Common: CSS processing, asset loading, TypeScript compilation

Custom Configuration Support

Multiple ways to customize webpack configuration:

• Preset System: Through Storybook presets using the webpack preset
• Custom webpack.config.js: Detected and loaded from config directory
• Inline webpackConfig: Function-based configuration modification
• webpackFinal: Preset-based final configuration modification

Error Handling

Configuration generation includes error handling for:

• Missing Dependencies: Webpack version validation and dependency checking
• Invalid Configurations: Schema validation and configuration conflicts
• Framework Compatibility: Framework-specific requirement validation
• Asset Resolution: File and module resolution error reporting