0
# Webpack Configuration
1

2
Webpack5 configuration generation with manager-specific settings, plugin configuration, entry point management, and Storybook composition support.
3

4
## Capabilities
5

6
### Manager Webpack Configuration
7

8
Generates the complete webpack configuration for building the Storybook manager UI.
9

10
```typescript { .api }
11
/**
12
 * Generate webpack configuration for manager build
13
 * @param options - Storybook configuration options
14
 * @returns Promise resolving to complete webpack Configuration
15
 */
16
function getManagerWebpackConfig(options: Options): Promise<Configuration>;
17

18
interface Options {
19
  /** Path to Storybook configuration directory */
20
  configDir: string;
21
  /** Output directory for built files */
22
  outputDir?: string;
23
  /** Preset collection for configuration */
24
  presets: PresetCollection;
25
  /** Cache provider for build optimization */
26
  cache?: CacheProvider;
27
  /** Enable manager caching */
28
  managerCache?: boolean;
29
  /** Smoke test mode flag */
30
  smokeTest?: boolean;
31
  /** Configuration type (DEVELOPMENT|PRODUCTION) */
32
  configType?: string;
33
  /** Documentation mode flag */
34
  docsMode?: boolean;
35
  /** Preview URL for manager */
36
  previewUrl?: string;
37
  /** Version check configuration */
38
  versionCheck?: any;
39
  /** Release notes data */
40
  releaseNotesData?: any;
41
  /** Feature flags */
42
  features?: Record<string, any>;
43
  /** Server channel URL */
44
  serverChannelUrl?: string;
45
}
46
```
47

48
**Usage Examples:**
49

50
```typescript
51
import { getManagerWebpackConfig } from "@storybook/manager-webpack5/manager-config";
52

53
const config = await getManagerWebpackConfig({
54
  configDir: '.storybook',
55
  outputDir: './storybook-static',
56
  presets: presetCollection,
57
  configType: 'PRODUCTION',
58
  cache: cacheProvider,
59
  managerCache: true,
60
});
61

62
console.log('Entry points:', config.entry);
63
console.log('Output path:', config.output?.path);
64
```
65

66
### Auto-Discovery of Composition Refs
67

68
Automatically discovers Storybook composition references from package dependencies.
69

70
```typescript { .api }
71
/**
72
 * Auto-discover Storybook composition refs from dependencies
73
 * @param options - Storybook configuration options
74
 * @param disabledRefs - Array of ref IDs to exclude from discovery
75
 * @returns Promise resolving to array of discovered refs
76
 */
77
function getAutoRefs(options: Options, disabledRefs?: string[]): Promise<Ref[]>;
78

79
interface Ref {
80
  /** Unique identifier for the ref */
81
  id: string;
82
  /** URL where the Storybook is hosted */
83
  url: string;
84
  /** Display title for the ref */
85
  title: string;
86
  /** Version of the referenced Storybook */
87
  version?: string;
88
  /** Type indicating server accessibility */
89
  type?: 'server-checked' | 'unknown';
90
}
91
```
92

93
**Usage Examples:**
94

95
```typescript
96
import { getAutoRefs } from "@storybook/manager-webpack5/manager-config";
97

98
// Discover all available refs
99
const allRefs = await getAutoRefs(options);
100

101
// Discover refs excluding specific ones
102
const filteredRefs = await getAutoRefs(options, [
103
  '@company/design-system',
104
  '@company/legacy-components'
105
]);
106

107
console.log('Available composition refs:', allRefs);
108
```
109

110
### Manager Webpack Preset
111

112
Core webpack configuration preset with plugins, loaders, and optimization settings.
113

114
```typescript { .api }
115
/**
116
 * Configure webpack for manager build with plugins and loaders
117
 * @param config - Base webpack configuration (usually empty)
118
 * @param options - Extended options with manager-specific settings
119
 * @returns Promise resolving to complete webpack Configuration
120
 */
121
function managerWebpack(
122
  config: Configuration,
123
  options: Options & ManagerWebpackOptions
124
): Promise<Configuration>;
125

126
interface ManagerWebpackOptions {
127
  /** Webpack entry points */
128
  entries: string[];
129
  /** Composition refs configuration */
130
  refs?: Record<string, Ref>;
131
  /** Modern build flag */
132
  modern?: boolean;
133
}
134
```
135

136
**Usage Examples:**
137

138
```typescript
139
import { managerWebpack } from "@storybook/manager-webpack5/presets/manager-preset";
140

141
const finalConfig = await managerWebpack({}, {
142
  configDir: '.storybook',
143
  outputDir: './storybook-static',
144
  configType: 'PRODUCTION',
145
  entries: ['./src/manager.ts'],
146
  refs: discoveredRefs,
147
  modern: true,
148
  presets: presetCollection,
149
});
150
```
151

152
### Manager Entry Points
153

154
Determines the entry points for the manager bundle including addons and configuration.
155

156
```typescript { .api }
157
/**
158
 * Determine entry points for manager bundle
159
 * @param installedAddons - Array of installed addon names
160
 * @param options - Entry point configuration options
161
 * @returns Promise resolving to array of entry point paths
162
 */
163
function managerEntries(
164
  installedAddons: string[],
165
  options: ManagerEntryOptions
166
): Promise<string[]>;
167

168
interface ManagerEntryOptions {
169
  /** Main manager entry point */
170
  managerEntry?: string;
171
  /** Path to Storybook configuration directory */
172
  configDir: string;
173
  /** Enable modern build mode */
174
  modern?: boolean;
175
}
176
```
177

178
**Usage Examples:**
179

180
```typescript
181
import { managerEntries } from "@storybook/manager-webpack5/presets/manager-preset";
182

183
const entries = await managerEntries(
184
  ['@storybook/addon-actions', '@storybook/addon-controls'],
185
  {
186
    configDir: '.storybook',
187
    managerEntry: '@storybook/core-client/dist/esm/manager',
188
    modern: false,
189
  }
190
);
191

192
console.log('Manager entry points:', entries);
193
```
194

195
### Babel Loader Configuration
196

197
Creates babel-loader webpack rule configuration for manager-specific transpilation.
198

199
```typescript { .api }
200
/**
201
 * Create babel-loader webpack rule for manager
202
 * @returns Webpack rule configuration for babel-loader
203
 */
204
function babelLoader(): RuleSetRule;
205

206
interface RuleSetRule {
207
  test: RegExp;
208
  use: LoaderConfig[];
209
  include: string[];
210
  exclude: RegExp[];
211
}
212

213
interface LoaderConfig {
214
  loader: string;
215
  options: BabelLoaderOptions;
216
}
217

218
interface BabelLoaderOptions {
219
  sourceType: 'unambiguous';
220
  presets: string[];
221
  plugins: string[];
222
  babelrc: false;
223
  configFile: false;
224
}
225
```
226

227
**Usage Examples:**
228

229
```typescript
230
import { babelLoader } from "@storybook/manager-webpack5/presets/babel-loader-manager";
231

232
const babelRule = babelLoader();
233

234
const webpackConfig = {
235
  module: {
236
    rules: [
237
      babelRule,
238
      // ... other rules
239
    ],
240
  },
241
};
242
```
243

244
## Configuration Features
245

246
The webpack configuration includes:
247

248
- **Modern JavaScript/TypeScript Processing**: Babel loader with React preset and template literal transformation
249
- **CSS Support**: Style-loader and css-loader for CSS processing
250
- **Asset Handling**: File loader for images, fonts, and media files with content hashing
251
- **HTML Generation**: HtmlWebpackPlugin for manager HTML with template injection
252
- **Virtual Modules**: Support for dynamically generated modules (refs configuration)
253
- **Development Server**: Webpack dev middleware integration for hot reloading
254
- **Production Optimization**: Code splitting, minification, and tree shaking
255
- **Caching**: Persistent caching for improved build performance