0
# Configuration
1

2
Comprehensive configuration options covering entry points, output settings, optimization, plugins, and development features for customizing the build process.
3

4
## Capabilities
5

6
### Main Configuration Interface
7

8
Primary configuration object for customizing build behavior.
9

10
```typescript { .api }
11
interface Configuration {
12
  /** Entry points for the application */
13
  entry?: Entry;
14
  /** Output configuration */
15
  output?: Output;
16
  /** Build mode affecting default optimizations */
17
  mode?: Mode;
18
  /** Target environment for the build */
19
  target?: Target;
20
  /** Module processing rules and options */
21
  module?: ModuleOptions;
22
  /** Module resolution configuration */
23
  resolve?: ResolveOptions;
24
  /** Array of plugins to apply */
25
  plugins?: Plugin[];
26
  /** Build optimization settings */
27
  optimization?: Optimization;
28
  /** Experimental features */
29
  experiments?: Experiments;
30
  /** Development server configuration */
31
  devServer?: DevServer;
32
  /** Source map generation */
33
  devtool?: DevTool;
34
  /** External dependencies configuration */
35
  externals?: Externals;
36
  /** Build statistics output */
37
  stats?: StatsValue;
38
  /** Configuration name for multi-compiler */
39
  name?: string;
40
  /** Dependencies on other configurations */
41
  dependencies?: string[];
42
  /** Watch mode options */
43
  watch?: boolean;
44
  /** Watch configuration */
45
  watchOptions?: WatchOptions;
46
}
47
```
48

49
### Entry Configuration
50

51
Entry points define where the bundler starts building the dependency graph.
52

53
```typescript { .api }
54
type Entry = string | string[] | EntryObject | EntryFunction;
55

56
/** Simple string entry */
57
type EntryString = string;
58

59
/** Array of entry files */
60
type EntryArray = string[];
61

62
/** Object with named entry points */
63
interface EntryObject {
64
  [name: string]: EntryDescription | string | string[];
65
}
66

67
/** Detailed entry configuration */
68
interface EntryDescription {
69
  /** Entry file(s) */
70
  import: string | string[];
71
  /** Dependencies that must be loaded before this entry */
72
  dependOn?: string | string[];
73
  /** Runtime chunk name */
74
  runtime?: string | false;
75
  /** Filename template for this entry */
76
  filename?: string;
77
  /** Chunk loading method */
78
  chunkLoading?: ChunkLoading;
79
  /** Async chunks method */
80
  asyncChunks?: boolean;
81
  /** Public path for this entry */
82
  publicPath?: string;
83
  /** Base URI for this entry */
84
  baseUri?: string;
85
}
86

87
/** Function-based entry for dynamic entries */
88
type EntryFunction = () => Entry | Promise<Entry>;
89

90
/** Chunk loading methods */
91
type ChunkLoading = "jsonp" | "import-scripts" | "require" | "async-node" | "import" | false;
92
```
93

94
**Usage Examples:**
95

96
```typescript
97
// String entry
98
const config = {
99
  entry: "./src/index.js"
100
};
101

102
// Array entry
103
const config = {
104
  entry: ["./src/polyfills.js", "./src/index.js"]
105
};
106

107
// Object entry with multiple bundles
108
const config = {
109
  entry: {
110
    app: "./src/app.js",
111
    admin: "./src/admin.js",
112
    vendor: ["react", "react-dom"]
113
  }
114
};
115

116
// Detailed entry configuration
117
const config = {
118
  entry: {
119
    main: {
120
      import: "./src/index.js",
121
      dependOn: "vendor",
122
      runtime: "main-runtime"
123
    },
124
    vendor: {
125
      import: ["react", "react-dom"],
126
      runtime: "vendor-runtime"
127
    }
128
  }
129
};
130

131
// Dynamic entry
132
const config = {
133
  entry: async () => {
134
    const entries = await getEntryPoints();
135
    return entries;
136
  }
137
};
138
```
139

140
### Output Configuration
141

142
Controls how bundles are emitted and where they are placed.
143

144
```typescript { .api }
145
interface Output {
146
  /** Output directory path */
147
  path?: string;
148
  /** Bundle filename template */
149
  filename?: string;
150
  /** Public URL path for assets */
151
  publicPath?: string;
152
  /** Chunk filename template */
153
  chunkFilename?: string;
154
  /** Asset filename template */
155
  assetModuleFilename?: string;
156
  /** Library configuration for exporting */
157
  library?: LibraryOptions;
158
  /** Environment features to assume */
159
  environment?: Environment;
160
  /** Clean output directory before build */
161
  clean?: boolean;
162
  /** Compare outputs and only emit changed files */
163
  compareBeforeEmit?: boolean;
164
  /** Source map filename template */
165
  sourceMapFilename?: string;
166
  /** Hot update chunk filename */
167
  hotUpdateChunkFilename?: string;
168
  /** Hot update main filename */
169
  hotUpdateMainFilename?: string;
170
  /** Unique name for this build */
171
  uniqueName?: string;
172
  /** Chunk loading method */
173
  chunkLoading?: ChunkLoading;
174
  /** WebAssembly loading method */
175
  wasmLoading?: WasmLoading;
176
  /** Worker chunk loading */
177
  workerChunkLoading?: ChunkLoading;
178
}
179

180
interface LibraryOptions {
181
  /** Library name */
182
  name?: string | string[] | LibraryCustomUmdObject;
183
  /** Export format */
184
  type?: LibraryType;
185
  /** UMD named define */
186
  umdNamedDefine?: boolean;
187
  /** Auxiliary comment */
188
  auxiliaryComment?: string | LibraryAuxiliaryComment;
189
  /** Export property */
190
  export?: string | string[];
191
}
192

193
interface Environment {
194
  /** Arrow functions support */
195
  arrowFunction?: boolean;
196
  /** BigInt support */
197
  bigIntLiteral?: boolean;
198
  /** const/let support */
199
  const?: boolean;
200
  /** Destructuring support */
201
  destructuring?: boolean;
202
  /** Dynamic import support */
203
  dynamicImport?: boolean;
204
  /** for...of support */
205
  forOf?: boolean;
206
  /** Module system support */
207
  module?: boolean;
208
  /** Optional chaining support */
209
  optionalChaining?: boolean;
210
  /** Template literals support */
211
  templateLiteral?: boolean;
212
}
213

214
type LibraryType = "var" | "module" | "assign" | "assign-properties" | "this" | "window" | 
215
  "self" | "global" | "commonjs" | "commonjs2" | "commonjs-module" | "amd" | "amd-require" | 
216
  "umd" | "umd2" | "jsonp" | "system";
217

218
type WasmLoading = "fetch-streaming" | "fetch" | "async-node" | false;
219
```
220

221
### Module Configuration
222

223
Controls how different module types are processed and transformed.
224

225
```typescript { .api }
226
interface ModuleOptions {
227
  /** Array of rules for processing modules */
228
  rules?: RuleSetRule[];
229
  /** Parser options by module type */
230
  parser?: { [moduleType: string]: any };
231
  /** Generator options by module type */
232
  generator?: { [moduleType: string]: any };
233
  /** Prevent parsing for certain modules */
234
  noParse?: RegExp | RegExp[] | ((request: string) => boolean) | string | string[];
235
  /** Unsupported features that should cause errors */
236
  unsafeCache?: boolean | ((module: any) => boolean);
237
  /** Default type for modules */
238
  defaultRules?: RuleSetRule[];
239
}
240

241
interface RuleSetRule {
242
  /** Match condition for resource */
243
  test?: RuleSetCondition;
244
  /** Include condition */
245
  include?: RuleSetCondition;
246
  /** Exclude condition */
247
  exclude?: RuleSetCondition;
248
  /** Resource condition */
249
  resource?: RuleSetCondition;
250
  /** Resource query condition */
251
  resourceQuery?: RuleSetCondition;
252
  /** Issuer condition */
253
  issuer?: RuleSetCondition;
254
  /** Module type */
255
  type?: string;
256
  /** Loaders to apply */
257
  use?: RuleSetUseItem | RuleSetUseItem[];
258
  /** Loader with options (shorthand) */
259
  loader?: string;
260
  /** Options for the loader */
261
  options?: any;
262
  /** Parser options */
263
  parser?: any;
264
  /** Generator options */
265
  generator?: any;
266
  /** Resolve options */
267
  resolve?: ResolveOptions;
268
  /** Side effects flag */
269
  sideEffects?: boolean;
270
  /** Enforcement order */
271
  enforce?: "pre" | "post";
272
  /** Nested rules */
273
  oneOf?: RuleSetRule[];
274
  /** Multiple rule sets (all must match) */
275
  rules?: RuleSetRule[];
276
}
277

278
type RuleSetCondition = string | RegExp | ((value: string) => boolean) | 
279
  RuleSetLogicalConditions | RuleSetCondition[];
280

281
interface RuleSetLogicalConditions {
282
  and?: RuleSetCondition[];
283
  or?: RuleSetCondition[];
284
  not?: RuleSetCondition;
285
}
286

287
type RuleSetUseItem = string | RuleSetLoader | ((context: any) => RuleSetLoader);
288

289
interface RuleSetLoader {
290
  loader: string;
291
  options?: any;
292
}
293
```
294

295
### Resolve Configuration
296

297
Controls how modules are resolved and located.
298

299
```typescript { .api }
300
interface ResolveOptions {
301
  /** Path aliases */
302
  alias?: { [key: string]: string | false | string[] };
303
  /** Alias for field names */
304
  aliasFields?: string[] | string[][];
305
  /** Cache resolution results */
306
  cache?: boolean;
307
  /** Condition names for exports field */
308
  conditionNames?: string[];
309
  /** Description files to read */
310
  descriptionFiles?: string[];
311
  /** Enforce extension presence */
312
  enforceExtension?: boolean;
313
  /** File extensions to try */
314
  extensions?: string[];
315
  /** Fallback locations */
316
  fallback?: { [key: string]: string | false | string[] };
317
  /** Package.json fields to check for entry points */
318
  mainFields?: string[];
319
  /** Main files to look for */
320
  mainFiles?: string[];
321
  /** Directories to search for modules */
322
  modules?: string[];
323
  /** Plugins for resolver */
324
  plugins?: any[];
325
  /** Prefer relative paths */
326
  preferRelative?: boolean;
327
  /** Symlink resolution */
328
  symlinks?: boolean;
329
  /** Unsafe cache */
330
  unsafeCache?: boolean | RegExp | ((request: string) => boolean);
331
  /** Use sync file system calls */
332
  useSyncFileSystemCalls?: boolean;
333
}
334
```
335

336
### Optimization Configuration
337

338
Build optimization settings including minification, code splitting, and tree shaking.
339

340
```typescript { .api }
341
interface Optimization {
342
  /** Enable/disable minification */
343
  minimize?: boolean;
344
  /** Custom minimizers */
345
  minimizer?: Plugin[];
346
  /** Remove available modules optimization */
347
  removeAvailableModules?: boolean;
348
  /** Remove empty chunks */
349
  removeEmptyChunks?: boolean;
350
  /** Merge duplicate chunks */
351
  mergeDuplicateChunks?: boolean;
352
  /** Flag dependency usage */
353
  flagIncludedChunks?: boolean;
354
  /** Module concatenation optimization */
355
  concatenateModules?: boolean;
356
  /** Side effects optimization */
357
  sideEffects?: boolean | "flag";
358
  /** Provided exports optimization */
359
  providedExports?: boolean;
360
  /** Used exports optimization */
361
  usedExports?: boolean | "global";
362
  /** Inner graph analysis */
363
  innerGraph?: boolean;
364
  /** Mangle exports */
365
  mangleExports?: boolean | "deterministic" | "size";
366
  /** Mangle webpack runtime */
367
  mangleWasmImports?: boolean;
368
  /** Node.js modules polyfills */
369
  nodeEnv?: string | false;
370
  /** Code splitting configuration */
371
  splitChunks?: OptimizationSplitChunksOptions;
372
  /** Runtime chunk extraction */
373
  runtimeChunk?: OptimizationRuntimeChunk;
374
  /** Emit on errors */
375
  emitOnErrors?: boolean;
376
  /** Real content hash */
377
  realContentHash?: boolean;
378
}
379

380
interface OptimizationSplitChunksOptions {
381
  /** Chunks to split */
382
  chunks?: "all" | "async" | "initial" | ((chunk: any) => boolean);
383
  /** Minimum size for chunk creation */
384
  minSize?: number;
385
  /** Minimum size reduction for chunk creation */
386
  minSizeReduction?: number;
387
  /** Minimum remaining size after splitting */
388
  minRemainingSize?: number;
389
  /** Maximum size hint for chunks */
390
  maxSize?: number;
391
  /** Maximum async size hint */
392
  maxAsyncSize?: number;
393
  /** Maximum initial size hint */
394
  maxInitialSize?: number;
395
  /** Minimum chunks sharing a module */
396
  minChunks?: number;
397
  /** Maximum number of async requests */
398
  maxAsyncRequests?: number;
399
  /** Maximum number of initial requests */
400
  maxInitialRequests?: number;
401
  /** Cache groups configuration */
402
  cacheGroups?: { [key: string]: OptimizationSplitChunksCacheGroup };
403
  /** Default name for chunks */
404
  name?: boolean | string | ((module: any, chunks: any[], key: string) => string);
405
  /** Filename template */
406
  filename?: string;
407
  /** Automatically generate names */
408
  automaticNameDelimiter?: string;
409
  /** Hide path info */
410
  hidePathInfo?: boolean;
411
  /** Enforce size limits */
412
  enforceSizeThreshold?: number;
413
}
414

415
interface OptimizationSplitChunksCacheGroup {
416
  /** Test condition */
417
  test?: RegExp | string | ((module: any) => boolean);
418
  /** Chunk selection */
419
  chunks?: "all" | "async" | "initial" | ((chunk: any) => boolean);
420
  /** Enforce this cache group */
421
  enforce?: boolean;
422
  /** Priority for this cache group */
423
  priority?: number;
424
  /** Reuse existing chunks */
425
  reuseExistingChunk?: boolean;
426
  /** Filename for chunks */
427
  filename?: string;
428
  /** Name for chunks */
429
  name?: boolean | string | ((module: any, chunks: any[], key: string) => string);
430
  /** Minimum size */
431
  minSize?: number;
432
  /** Maximum size */
433
  maxSize?: number;
434
  /** Minimum chunks */
435
  minChunks?: number;
436
}
437

438
type OptimizationRuntimeChunk = boolean | "single" | "multiple" | 
439
  { name?: string | ((entrypoint: any) => string) };
440
```
441

442
### Mode and Target
443

444
```typescript { .api }
445
/** Build mode affecting default configurations */
446
type Mode = "development" | "production" | "none";
447

448
/** Target environment for the build */
449
type Target = string | string[] | false;
450
```
451

452
**Usage Examples:**
453

454
```typescript
455
// Basic configuration
456
const config = {
457
  entry: "./src/index.js",
458
  output: {
459
    path: path.resolve(__dirname, "dist"),
460
    filename: "[name].[contenthash].js",
461
    publicPath: "/assets/",
462
    clean: true
463
  },
464
  mode: "production",
465
  target: ["web", "es2015"],
466
  
467
  module: {
468
    rules: [
469
      {
470
        test: /\.tsx?$/,
471
        use: "swc-loader",
472
        exclude: /node_modules/
473
      },
474
      {
475
        test: /\.css$/,
476
        use: ["style-loader", "css-loader"]
477
      }
478
    ]
479
  },
480
  
481
  resolve: {
482
    extensions: [".js", ".ts", ".tsx"],
483
    alias: {
484
      "@": path.resolve(__dirname, "src")
485
    }
486
  },
487
  
488
  optimization: {
489
    minimize: true,
490
    splitChunks: {
491
      chunks: "all",
492
      cacheGroups: {
493
        vendor: {
494
          test: /[\\/]node_modules[\\/]/,
495
          name: "vendors",
496
          chunks: "all"
497
        }
498
      }
499
    },
500
    runtimeChunk: "single"
501
  }
502
};
503
```