0
# Configuration Options
1

2
WebpackBar provides comprehensive configuration options to customize the progress display, enable profiling, and configure custom reporters.
3

4
## Capabilities
5

6
### Basic Configuration
7

8
Core options for customizing the appearance and behavior of the progress bar.
9

10
```typescript { .api }
11
interface WebpackBarOptions {
12
  /**
13
   * Display name for the progress bar
14
   * @default 'build'
15
   */
16
  name?: string;
17

18
  /**
19
   * Color of the progress bar
20
   * @default 'green'
21
   */
22
  color?: string;
23

24
  /**
25
   * Enable profiler for performance analysis
26
   * @default false
27
   */
28
  profile?: boolean;
29

30
  /**
31
   * Enable fancy bars reporter
32
   * Defaults to true when not in CI or testing mode
33
   * @default true
34
   */
35
  fancy?: boolean;
36

37
  /**
38
   * Enable simple log reporter (only start and end)
39
   * Defaults to true when running in minimal environments
40
   * @default true
41
   */
42
  basic?: boolean;
43

44
  /**
45
   * Register a single custom reporter
46
   */
47
  reporter?: ReporterInput;
48

49
  /**
50
   * Register an array of custom reporters
51
   * @default ['basic'] | ['fancy']
52
   */
53
  reporters?: ReporterInput[];
54
}
55
```
56

57
**Usage Examples:**
58

59
```javascript
60
// Basic configuration
61
new WebpackBar({
62
  name: 'Frontend Build',
63
  color: 'blue'
64
});
65

66
// Enable profiling
67
new WebpackBar({
68
  name: 'Production Build',
69
  color: 'green',
70
  profile: true
71
});
72

73
// Minimal configuration for CI environments
74
new WebpackBar({
75
  name: 'CI Build',
76
  fancy: false,
77
  basic: true
78
});
79
```
80

81
### Reporter Configuration
82

83
Configure built-in and custom reporters for different output formats.
84

85
```typescript { .api }
86
type ReporterOpts = { 
87
  reporter: Reporter | string; 
88
  options?: any 
89
};
90

91
type ReporterInput = string | [Reporter | string, any?] | ReporterOpts;
92
```
93

94
**Usage Examples:**
95

96
```javascript
97
// Using built-in reporters
98
new WebpackBar({
99
  reporters: ['basic', 'profile']
100
});
101

102
// Custom reporter with options
103
new WebpackBar({
104
  reporter: ['fancy', { logLevel: 'verbose' }]
105
});
106

107
// Multiple reporters with different configurations
108
new WebpackBar({
109
  reporters: [
110
    'basic',
111
    ['profile', { showModules: true }],
112
    { reporter: 'stats', options: { detailed: true } }
113
  ]
114
});
115
```
116

117
### Color Options
118

119
WebpackBar supports various color options for the progress bar display.
120

121
**Common Colors:**
122
- `'green'` (default)
123
- `'blue'`
124
- `'red'`
125
- `'yellow'`
126
- `'magenta'`
127
- `'cyan'`
128
- `'white'`
129
- `'gray'`
130

131
**Usage Examples:**
132

133
```javascript
134
// Different colors for different builds
135
new WebpackBar({
136
  name: 'Client',
137
  color: 'blue'
138
});
139

140
new WebpackBar({
141
  name: 'Server',
142
  color: 'green'
143
});
144
```
145

146
### Environment-Based Configuration
147

148
WebpackBar automatically adjusts its behavior based on the environment.
149

150
**Automatic Behavior:**
151
- **CI/Testing Environments**: Defaults to `basic: true, fancy: false`
152
- **Development Environments**: Defaults to `basic: false, fancy: true`
153
- **Minimal Environments**: Automatically enables basic reporter
154

155
**Manual Override:**
156

157
```javascript
158
// Force fancy reporter in CI
159
new WebpackBar({
160
  name: 'CI Build',
161
  fancy: true,
162
  basic: false
163
});
164

165
// Force basic reporter in development
166
new WebpackBar({
167
  name: 'Dev Build',
168
  fancy: false,
169
  basic: true
170
});
171
```
172

173
### Multiple Build Configuration
174

175
Configure different progress bars for multiple concurrent builds (useful for SSR scenarios).
176

177
```javascript
178
// Client build configuration
179
const clientConfig = {
180
  name: 'client',
181
  // ... webpack config
182
  plugins: [
183
    new WebpackBar({
184
      name: 'Client',
185
      color: 'blue'
186
    })
187
  ]
188
};
189

190
// Server build configuration
191
const serverConfig = {
192
  name: 'server',
193
  // ... webpack config
194
  plugins: [
195
    new WebpackBar({
196
      name: 'Server',
197
      color: 'green'
198
    })
199
  ]
200
};
201

202
export default [clientConfig, serverConfig];
203
```