0
# Preset System
1

2
Modular preset system for framework-specific and custom webpack configurations, providing entry point management, plugin configuration, and extensible webpack customization through Storybook's preset architecture.
3

4
## Capabilities
5

6
### Core Presets
7

8
Built-in preset paths for core Storybook builder functionality.
9

10
```typescript { .api }
11
/**
12
 * Core preset paths for essential builder functionality
13
 * Includes preview-preset for webpack configuration and entry management
14
 */
15
const corePresets: string[];
16
```
17

18
**Usage Examples:**
19

20
```javascript
21
// In .storybook/main.js
22
module.exports = {
23
  core: {
24
    builder: 'webpack4',
25
  },
26
  // Core presets are automatically included
27
};
28
```
29

30
### Override Presets
31

32
Override preset paths for custom webpack configuration handling.
33

34
```typescript { .api }
35
/**
36
 * Override preset paths for custom webpack configuration
37
 * Includes custom-webpack-preset for user configuration integration
38
 */
39
const overridePresets: string[];
40
```
41

42
**Usage Examples:**
43

44
```javascript
45
// Custom webpack configuration is automatically detected and loaded
46
// through override presets when webpack.config.js exists in config directory
47
```
48

49
### Preview Preset Functions
50

51
Preview preset provides webpack configuration and entry point management for the Storybook preview iframe.
52

53
```typescript { .api }
54
/**
55
 * Generates webpack configuration for preview iframe
56
 * @param _ - Unused first parameter (preset convention)
57
 * @param options - Storybook options with framework and configuration settings
58
 * @returns Promise resolving to webpack Configuration
59
 */
60
function webpack(_: any, options: any): Promise<Configuration>;
61

62
/**
63
 * Generates entry points for preview iframe including HMR client in development
64
 * @param _ - Unused first parameter (preset convention)
65
 * @param options - Storybook options with configuration type and settings
66
 * @returns Promise resolving to array of entry point paths
67
 */
68
function entries(_: any, options: any): Promise<string[]>;
69
```
70

71
**Usage Examples:**
72

73
```typescript
74
// Preview preset is automatically applied through core presets
75
// It generates comprehensive webpack configuration including:
76
// - HTML webpack plugin for iframe generation
77
// - Virtual modules for story and config files
78
// - Asset loaders and optimization
79
// - Development server configuration
80
```
81

82
### Custom Webpack Preset Functions
83

84
Custom webpack preset handles user-defined webpack configurations and framework integration.
85

86
```typescript { .api }
87
/**
88
 * Applies custom webpack configuration with framework integration
89
 * @param config - Base webpack configuration from Storybook
90
 * @param options - Storybook options including config directory and webpack config
91
 * @returns Promise resolving to final webpack configuration
92
 */
93
function webpack(config: Configuration, options: Options): Promise<Configuration>;
94

95
/**
96
 * Provides webpack instance for compilation
97
 * @returns Promise resolving to webpack module
98
 */
99
function webpackInstance(): Promise<typeof webpack>;
100

101
/**
102
 * Provides webpack version for compatibility checking
103
 * @returns Promise resolving to version string
104
 */
105
function webpackVersion(): Promise<string>;
106
```
107

108
**Usage Examples:**
109

110
```typescript
111
// Custom webpack configurations are automatically detected:
112

113
// 1. Through webpackConfig option
114
const storybookOptions = {
115
  webpackConfig: (config) => {
116
    config.resolve.alias['@'] = path.resolve(__dirname, 'src');
117
    return config;
118
  },
119
};
120

121
// 2. Through webpack.config.js file in config directory
122
// webpack.config.js
123
module.exports = ({ config, mode }) => {
124
  if (mode === 'DEVELOPMENT') {
125
    config.devtool = 'eval-source-map';
126
  }
127
  return config;
128
};
129

130
// 3. Through webpackFinal preset
131
// .storybook/main.js
132
module.exports = {
133
  webpackFinal: (config) => {
134
    config.module.rules.push({
135
      test: /\.scss$/,
136
      use: ['style-loader', 'css-loader', 'sass-loader'],
137
    });
138
    return config;
139
  },
140
};
141
```
142

143
## Preset Integration
144

145
### Framework-Specific Presets
146

147
The preset system integrates with framework-specific configurations:
148

149
- **Framework Options**: Applied through `${framework}Options` preset
150
- **TypeScript Integration**: TypeScript options applied through `typescript` preset
151
- **Babel Configuration**: Babel options applied through `babel` preset
152
- **Framework Compatibility**: Framework-specific webpack configurations
153

154
### Preset Application Order
155

156
Presets are applied in a specific order for proper configuration layering:
157

158
1. **Base Configuration**: Core webpack configuration generation
159
2. **Framework Presets**: Framework-specific modifications
160
3. **User Presets**: Custom preset configurations
161
4. **webpackFinal**: Final user modifications
162
5. **Custom Config**: User webpack.config.js file (full control mode)
163

164
### Entry Point Management
165

166
The preset system manages entry points for different scenarios:
167

168
- **Development Mode**: Includes webpack-hot-middleware client for HMR
169
- **Production Mode**: Optimized entry points without development middleware
170
- **Story Entries**: Virtual modules for story and configuration files
171
- **Framework Entries**: Framework-specific entry point requirements
172

173
## Configuration Modes
174

175
### Full Control Mode
176

177
When a custom webpack configuration function is detected:
178

179
```javascript
180
// webpack.config.js - Full control mode
181
module.exports = ({ config, mode }) => {
182
  // User has full control over configuration
183
  return customWebpackConfig;
184
};
185
```
186

187
### Default Mode
188

189
When no custom configuration is provided:
190

191
```javascript
192
// Uses default Webpack4 setup with:
193
// - Standard loaders and plugins
194
// - Framework-specific configurations  
195
// - Storybook-optimized settings
196
```
197

198
### Preset Extension Mode
199

200
When using webpackFinal in main.js:
201

202
```javascript
203
// .storybook/main.js - Preset extension mode
204
module.exports = {
205
  webpackFinal: (config) => {
206
    // Modify existing configuration
207
    return enhancedConfig;
208
  },
209
};
210
```
211

212
## Advanced Features
213

214
### Virtual Module Generation
215

216
The preset system creates virtual modules for:
217

218
- **Story Files**: Generated modules containing story imports and configuration
219
- **Config Files**: Virtual modules for preview configuration loading
220
- **Entry Points**: Dynamic entry point generation based on story patterns
221

222
### Plugin Integration
223

224
Automatic plugin configuration including:
225

226
- **HTML Webpack Plugin**: For iframe HTML generation
227
- **Progress Plugin**: For build progress reporting
228
- **Hot Module Replacement**: For development mode HMR
229
- **Case Sensitive Paths**: For cross-platform compatibility
230
- **Fork TS Checker**: For TypeScript type checking
231
- **Terser Plugin**: For production minification
232

233
### Asset Processing
234

235
Comprehensive asset processing through preset configuration:
236

237
- **CSS Processing**: Style-loader, css-loader, postcss-loader
238
- **File Assets**: File-loader for images, fonts, and static assets
239
- **TypeScript/JavaScript**: Babel-loader with framework-specific extensions
240
- **Source Maps**: Development and production source map generation