0
# Configuration System
1

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

4
## Capabilities
5

6
### Get Configuration
7

8
Generates complete webpack configuration from Storybook options and presets.
9

10
```typescript { .api }
11
/**
12
 * Generates webpack configuration from Storybook options and presets
13
 * @param options - Storybook configuration options with presets and framework settings
14
 * @returns Promise resolving to webpack Configuration object
15
 */
16
function getConfig(options: Options): Promise<Configuration>;
17

18
interface Options {
19
  /** Babel configuration options */
20
  babelOptions: any;
21
  /** TypeScript configuration options */
22
  typescriptOptions: any;
23
  /** Preset manager for applying configuration transformations */
24
  presets: PresetApi;
25
  /** Target framework (react, vue, angular, etc.) */
26
  framework: string;
27
  /** Build configuration type */
28
  configType: 'DEVELOPMENT' | 'PRODUCTION';
29
  /** Output directory for built files */
30
  outputDir?: string;
31
  /** Storybook configuration directory */
32
  configDir: string;
33
  /** Package.json contents */
34
  packageJson: any;
35
  /** Enable quiet mode for reduced logging */
36
  quiet?: boolean;
37
  /** Preview URL for iframe */
38
  previewUrl?: string;
39
  /** Modern build flag */
40
  modern?: boolean;
41
  /** Feature flags */
42
  features?: Record<string, boolean>;
43
  /** Server channel URL */
44
  serverChannelUrl?: string;
45
  /** Custom webpack configuration function */
46
  webpackConfig?: (config: Configuration) => Configuration;
47
  /** Debug webpack flag for detailed output */
48
  debugWebpack?: boolean;
49
  [key: string]: any;
50
}
51
```
52

53
**Usage Examples:**
54

55
```typescript
56
import { getConfig } from "@storybook/builder-webpack4";
57
import type { Options } from "@storybook/core-common";
58

59
const storybookOptions: Options = {
60
  configType: 'DEVELOPMENT',
61
  outputDir: './storybook-static',
62
  configDir: '.storybook',
63
  framework: 'react',
64
  babelOptions: {
65
    presets: ['@babel/preset-env'],
66
  },
67
  typescriptOptions: {
68
    transpileOnly: true,
69
  },
70
  presets: presetManager,
71
  packageJson: require('./package.json'),
72
};
73

74
const webpackConfig = await getConfig(storybookOptions);
75
console.log('Generated webpack config:', webpackConfig);
76
```
77

78

79
## Configuration Features
80

81
### Asset Handling
82

83
The configuration system provides comprehensive asset handling:
84

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

90
### Framework Integration
91

92
Framework-specific configurations are supported through:
93

94
- **Preset System**: Framework-specific presets can modify webpack configuration
95
- **TypeScript Support**: Automatic TypeScript handling for compatible frameworks
96
- **File Extensions**: Framework-appropriate file extension handling
97
- **Framework Options**: Framework-specific options integration
98

99
### Development vs Production
100

101
Different configurations for development and production modes:
102

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

107
### Custom Configuration Support
108

109
Multiple ways to customize webpack configuration:
110

111
- **Preset System**: Through Storybook presets using the `webpack` preset
112
- **Custom webpack.config.js**: Detected and loaded from config directory
113
- **Inline webpackConfig**: Function-based configuration modification
114
- **webpackFinal**: Preset-based final configuration modification
115

116
## Error Handling
117

118
Configuration generation includes error handling for:
119

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