0
# Storybook Builder Webpack4
1

2
Storybook Builder Webpack4 is a Webpack 4-based builder for Storybook that serves as the framework-agnostic build engine powering the Storybook preview iframe. It provides comprehensive build functionality including development server with hot module replacement, production builds, TypeScript compilation, Babel transforms, CSS processing, and asset handling.
3

4
## Package Information
5

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

11
## Core Imports
12

13
```typescript
14
import { start, build, getConfig, executor, makeStatsFromError, bail, corePresets, overridePresets } from "@storybook/builder-webpack4";
15
```
16

17
For preset configuration:
18

19
```javascript
20
// In .storybook/main.js
21
module.exports = {
22
  core: {
23
    builder: 'webpack4',
24
  },
25
};
26
```
27

28
## Basic Usage
29

30
```typescript
31
import { start, build, getConfig } from "@storybook/builder-webpack4";
32
import type { Options } from "@storybook/core-common";
33

34
// For development server
35
const startOptions = {
36
  startTime: process.hrtime(),
37
  options: storybookOptions,
38
  router: expressRouter,
39
};
40

41
const devResult = await start(startOptions);
42

43
// For production build
44
const buildOptions = {
45
  startTime: process.hrtime(),
46
  options: storybookOptions,
47
};
48

49
const buildResult = await build(buildOptions);
50
```
51

52
## Architecture
53

54
Storybook Builder Webpack4 is built around several key components:
55

56
- **Builder Functions**: Core `start` and `build` functions that orchestrate the webpack compilation process
57
- **Configuration System**: Dynamic webpack configuration generation based on Storybook options and presets
58
- **Preset System**: Modular configuration system allowing framework-specific and custom webpack configurations
59
- **Generator Pattern**: Uses async generators for interruptible build processes
60
- **Middleware Integration**: Express middleware integration for development server functionality
61

62
## Capabilities
63

64
### Builder Operations
65

66
Core build functionality for development and production modes, with generator-based interruption support and progress reporting.
67

68
```typescript { .api }
69
function start(options: BuilderStartOptions): Promise<BuilderStartResult>;
70
function build(options: BuilderBuildOptions): Promise<BuilderBuildResult>;
71
function bail(): Promise<void>;
72
```
73

74
[Builder Operations](./builder-operations.md)
75

76
### Configuration System
77

78
Webpack configuration generation and customization system that integrates with Storybook's preset system.
79

80
```typescript { .api }
81
function getConfig(options: Options): Promise<Configuration>;
82

83
interface Options {
84
  babelOptions: any;
85
  typescriptOptions: any;
86
  presets: PresetApi;
87
  framework: string;
88
  configType: 'DEVELOPMENT' | 'PRODUCTION';
89
  [key: string]: any;
90
}
91
```
92

93
[Configuration System](./configuration-system.md)
94

95
### Preset System
96

97
Modular preset system for framework-specific and custom webpack configurations, including entry point management and plugin configuration.
98

99
```typescript { .api }
100
const corePresets: string[];
101
const overridePresets: string[];
102
```
103

104
[Preset System](./preset-system.md)
105

106
## Types
107

108
```typescript { .api }
109
interface BuilderStartOptions {
110
  startTime?: ReturnType<typeof process.hrtime>;
111
  options: Options;
112
  router: any;
113
}
114

115
interface BuilderStartResult {
116
  bail: () => Promise<void>;
117
  stats: Stats;
118
  totalTime: ReturnType<typeof process.hrtime>;
119
}
120

121
interface BuilderBuildOptions {
122
  startTime?: ReturnType<typeof process.hrtime>;
123
  options: Options;
124
}
125

126
interface BuilderBuildResult extends Stats {}
127

128
type WebpackBuilder = Builder<Configuration, Stats>;
129

130
type Unpromise<T extends Promise<any>> = T extends Promise<infer U> ? U : never;
131

132
type StarterFunction = (
133
  options: BuilderStartOptions
134
) => AsyncGenerator<unknown, BuilderStartResult, void>;
135

136
type BuilderFunction = (
137
  options: BuilderBuildOptions
138
) => AsyncGenerator<unknown, BuilderBuildResult, void>;
139

140
// Webpack types (from @types/webpack)
141
interface Stats {
142
  hasErrors(): boolean;
143
  hasWarnings(): boolean;
144
  toJson(options?: any): {
145
    warnings: string[];
146
    errors: string[];
147
    [key: string]: any;
148
  };
149
}
150

151
interface Configuration {
152
  name?: string;
153
  entry?: any;
154
  output?: {
155
    publicPath?: string;
156
    [key: string]: any;
157
  };
158
  module?: {
159
    rules?: any[];
160
  };
161
  plugins?: any[];
162
  resolve?: {
163
    alias?: Record<string, string>;
164
    extensions?: string[];
165
    [key: string]: any;
166
  };
167
  watchOptions?: any;
168
  stats?: any;
169
  [key: string]: any;
170
}
171

172
interface Builder<Config, BuildResult> {
173
  getConfig: (options: Options) => Promise<Config>;
174
  start: (options: any) => Promise<any>;
175
  build: (options: any) => Promise<BuildResult>;
176
  bail: () => Promise<void>;
177
}
178

179
interface PresetApi {
180
  apply<T = any>(
181
    key: string,
182
    defaultValue?: T,
183
    options?: any
184
  ): Promise<T>;
185
}
186
```