0
# Storybook Manager Webpack5
1

2
Storybook Manager Webpack5 is a modern webpack5-based builder for the Storybook manager UI, serving as a high-performance alternative to the default webpack4 builder. It provides comprehensive webpack5 configuration, development server integration, intelligent caching, and support for Storybook composition features.
3

4
## Package Information
5

6
- **Package Name**: @storybook/manager-webpack5
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @storybook/manager-webpack5`
10

11
## Core Imports
12

13
```typescript
14
import { 
15
  start, 
16
  build, 
17
  getConfig, 
18
  bail,
19
  WEBPACK_VERSION,
20
  executor 
21
} from "@storybook/manager-webpack5";
22
```
23

24
For CommonJS:
25

26
```javascript
27
const { 
28
  start, 
29
  build, 
30
  getConfig, 
31
  bail,
32
  WEBPACK_VERSION,
33
  executor 
34
} = require("@storybook/manager-webpack5");
35
```
36

37
For preset usage:
38

39
```javascript
40
// In .storybook/main.js
41
module.exports = {
42
  core: {
43
    builder: 'webpack5',
44
  },
45
};
46
```
47

48
For sub-module imports:
49

50
```javascript
51
// Manager preset functions (for advanced webpack configuration)
52
const { managerWebpack, managerEntries } = require("@storybook/manager-webpack5/manager-preset");
53

54
// Prebuilt manager utilities (for optimization scenarios)
55
const { getPrebuiltDir, DEFAULT_ADDONS, IGNORED_ADDONS } = require("@storybook/manager-webpack5/prebuilt-manager");
56
```
57

58
**Note:** Sub-module imports provide access to internal utilities. Most users should use the main module exports. Sub-modules are primarily used by Storybook core and advanced integrations.
59

60
## Basic Usage
61

62
```typescript
63
import { start, build, getConfig } from "@storybook/manager-webpack5";
64
import type { Options } from "@storybook/core-common";
65

66
// Development mode with hot reloading
67
const options: Options = {
68
  configDir: '.storybook',
69
  outputDir: './storybook-static',
70
  // ... other options
71
};
72

73
// Start development server
74
const devResult = await start({
75
  options,
76
  startTime: process.hrtime(),
77
  router: expressRouter,
78
});
79

80
// Production build
81
const buildResult = await build({
82
  options,
83
  startTime: process.hrtime(),
84
});
85

86
// Get webpack configuration
87
const webpackConfig = await getConfig(options);
88
```
89

90
## Architecture
91

92
Storybook Manager Webpack5 is built around several key components:
93

94
- **Builder Interface**: Implements the Storybook Builder interface with `start`, `build`, and `getConfig` methods
95
- **Webpack5 Integration**: Full webpack5 configuration with modern loaders, plugins, and optimization
96
- **Generator-based Processing**: Uses async generators for interruptible build processes
97
- **Caching System**: Intelligent caching for manager configurations and builds to improve performance
98
- **Development Server**: Webpack dev middleware integration for hot reloading during development
99
- **Composition Support**: Auto-discovery and configuration of Storybook composition references
100
- **Prebuilt Manager**: Support for using prebuilt manager bundles when possible
101

102
## Capabilities
103

104
### Core Builder Functions
105

106
Primary builder interface implementing webpack5-based builds for the Storybook manager UI.
107

108
```typescript { .api }
109
function start(options: BuilderStartOptions): Promise<BuilderStartResult>;
110
function build(options: BuilderStartOptions): Promise<BuilderBuildResult>;
111
function getConfig(options: Options): Promise<Configuration>;
112
function bail(): Promise<void>;
113

114
interface BuilderStartOptions {
115
  startTime?: [number, number];
116
  options: Options;
117
  router: Router;
118
}
119

120
interface BuilderStartResult {
121
  bail: () => Promise<void>;
122
  stats: Stats;
123
  totalTime: [number, number];
124
}
125

126
interface BuilderBuildResult extends Stats {}
127
```
128

129
[Core Builder Functions](./builder-functions.md)
130

131
### Webpack Configuration
132

133
Webpack5 configuration generation with manager-specific settings, plugin configuration, and entry point management.
134

135
```typescript { .api }
136
function getManagerWebpackConfig(options: Options): Promise<Configuration>;
137
function getAutoRefs(options: Options, disabledRefs?: string[]): Promise<Ref[]>;
138

139
interface Options {
140
  configDir: string;
141
  outputDir: string;
142
  presets: PresetCollection;
143
  cache?: CacheProvider;
144
  managerCache?: boolean;
145
  smokeTest?: boolean;
146
  // ... other options
147
}
148

149
interface Ref {
150
  id: string;
151
  url: string;
152
  title: string;
153
  version?: string;
154
  type?: 'server-checked' | 'unknown';
155
}
156
```
157

158
[Webpack Configuration](./webpack-config.md)
159

160
### Caching System
161

162
Intelligent caching system for manager builds and configurations to improve build performance.
163

164
```typescript { .api }
165
function useManagerCache(
166
  cacheKey: string,
167
  options: Options,
168
  managerConfig: Configuration
169
): Promise<boolean>;
170

171
function clearManagerCache(cacheKey: string, options: Options): Promise<boolean>;
172
```
173

174
[Caching System](./caching.md)
175

176
### Prebuilt Manager
177

178
Support for using prebuilt manager bundles when the Storybook configuration meets certain criteria.
179

180
```typescript { .api }
181
function getPrebuiltDir(options: Options): Promise<string | false>;
182

183
const DEFAULT_ADDONS: string[];
184
const IGNORED_ADDONS: string[];
185
```
186

187
[Prebuilt Manager](./prebuilt-manager.md)
188

189
## Constants
190

191
```typescript { .api }
192
const WEBPACK_VERSION: string; // "5"
193
const corePresets: string[]; // [require.resolve('./presets/manager-preset')]
194
const overridePresets: string[]; // []
195
```
196

197
## Types
198

199
```typescript { .api }
200
type WebpackBuilder = Builder<Configuration, Stats>;
201
type BuilderStartOptions = Partial<Parameters<WebpackBuilder['start']>['0']>;
202
type BuilderStartResult = Unpromise<ReturnType<WebpackBuilder['start']>>;
203
type BuilderBuildOptions = Partial<Parameters<WebpackBuilder['build']>['0']>;
204
type BuilderBuildResult = Unpromise<ReturnType<WebpackBuilder['build']>>;
205

206
interface ExecutorInterface {
207
  /** 
208
   * Get webpack instance with version validation
209
   * Ensures webpack5 compatibility and provides webpack function
210
   */
211
  get(options: Options): Promise<typeof webpack>;
212
}
213

214
const executor: ExecutorInterface;
215
```