0
# Plugin System
1

2
Webpack's plugin system provides over 60 built-in plugins that extend webpack's core functionality through a powerful hooks-based architecture. Plugins can modify the compilation process, optimize bundles, manage assets, provide development tools, and integrate with various platforms and environments.
3

4
## Capabilities
5

6
### Core Functionality Plugins
7

8
Essential plugins that provide fundamental webpack features including global constants, module provision, environment integration, and module replacement.
9

10
```javascript { .api }
11
/**
12
 * Replaces variables with compile-time constants using string replacement
13
 * @param definitions - Object mapping variable names to values
14
 */
15
class DefinePlugin {
16
  constructor(definitions: Record<string, any>);
17
}
18

19
/**
20
 * Automatically loads modules when they are used as free variables
21
 * @param definitions - Object mapping variable names to module names/paths
22
 */
23
class ProvidePlugin {
24
  constructor(definitions: Record<string, string | string[]>);
25
}
26

27
/**
28
 * Maps environment variables to DefinePlugin definitions
29
 * @param keys - Array of environment variable names or object with defaults
30
 */
31
class EnvironmentPlugin {
32
  constructor(keys: string[] | Record<string, any>);
33
}
34

35
/**
36
 * Prevents bundling of certain modules based on request patterns
37
 * @param options - Ignore configuration with resource and context matchers
38
 */
39
class IgnorePlugin {
40
  constructor(options: {
41
    resourceRegExp?: RegExp;
42
    contextRegExp?: RegExp;
43
    checkResource?: (resource: string, context: string) => boolean;
44
  });
45
}
46

47
/**
48
 * Replaces the default resource resolution for context modules
49
 * @param resourceRegExp - Pattern to match context requests
50
 * @param newContentResource - New directory or callback for replacement
51
 * @param newContentRecursive - Whether to include subdirectories
52
 * @param newContentRegExp - Pattern to filter files in new context
53
 */
54
class ContextReplacementPlugin {
55
  constructor(
56
    resourceRegExp: RegExp,
57
    newContentResource?: string | ((resource: string) => string),
58
    newContentRecursive?: boolean,
59
    newContentRegExp?: RegExp
60
  );
61
}
62

63
/**
64
 * Excludes modules from being included in context module requests
65
 * @param negativeMatcher - Pattern to match modules for exclusion
66
 */
67
class ContextExclusionPlugin {
68
  constructor(negativeMatcher: RegExp);
69
}
70

71
/**
72
 * Replaces modules during the normal module factory resolution process
73
 * @param resourceRegExp - Pattern to match module requests
74
 * @param newResource - Replacement module path or callback
75
 */
76
class NormalModuleReplacementPlugin {
77
  constructor(
78
    resourceRegExp: RegExp,
79
    newResource: string | ((resource: any) => string)
80
  );
81
}
82
```
83

84
**Usage Examples:**
85

86
```javascript
87
const webpack = require("webpack");
88

89
module.exports = {
90
  plugins: [
91
    // Define compile-time constants
92
    new webpack.DefinePlugin({
93
      'process.env.NODE_ENV': JSON.stringify('production'),
94
      'API_BASE_URL': JSON.stringify('https://api.example.com'),
95
      'VERSION': JSON.stringify(require('./package.json').version)
96
    }),
97
    
98
    // Automatically provide modules
99
    new webpack.ProvidePlugin({
100
      $: 'jquery',
101
      jQuery: 'jquery',
102
      'window.jQuery': 'jquery',
103
      process: 'process/browser'
104
    }),
105
    
106
    // Map environment variables
107
    new webpack.EnvironmentPlugin({
108
      NODE_ENV: 'development',
109
      DEBUG: false,
110
      API_URL: 'http://localhost:3000'
111
    }),
112
    
113
    // Ignore moment.js locales
114
    new webpack.IgnorePlugin({
115
      resourceRegExp: /^\.\/locale$/,
116
      contextRegExp: /moment$/
117
    })
118
  ]
119
};
120
```
121

122
### Development Tools Plugins
123

124
Development-focused plugins that enhance the development experience with hot reloading, progress reporting, source maps, and debugging capabilities.
125

126
```javascript { .api }
127
/**
128
 * Enables Hot Module Replacement for faster development cycles
129
 * @param options - HMR configuration options
130
 */
131
class HotModuleReplacementPlugin {
132
  constructor(options?: {
133
    multiStep?: boolean;
134
    fullBuildTimeout?: number;
135
    requestTimeout?: number;
136
  });
137
}
138

139
/**
140
 * Generates source maps with fine-grained control over format and output
141
 * @param options - Source map generation options
142
 */
143
class SourceMapDevToolPlugin {
144
  constructor(options?: {
145
    filename?: string | false;
146
    include?: string | RegExp | Array<string | RegExp>;
147
    exclude?: string | RegExp | Array<string | RegExp>;
148
    moduleFilenameTemplate?: string | ((info: any) => string);
149
    fallbackModuleFilenameTemplate?: string | ((info: any) => string);
150
    append?: string | false;
151
    module?: boolean;
152
    columns?: boolean;
153
    lineToLine?: boolean | { test?: RegExp | Array<RegExp> };
154
    noSources?: boolean;
155
    publicPath?: string;
156
    fileContext?: string;
157
    sourceRoot?: string;
158
  });
159
}
160

161
/**
162
 * Fast source maps using eval() for development builds
163
 * @param options - Eval source map options
164
 */
165
class EvalSourceMapDevToolPlugin {
166
  constructor(options?: {
167
    include?: string | RegExp | Array<string | RegExp>;
168
    exclude?: string | RegExp | Array<string | RegExp>;
169
    moduleFilenameTemplate?: string | ((info: any) => string);
170
    module?: boolean;
171
    columns?: boolean;
172
    lineToLine?: boolean | { test?: RegExp | Array<RegExp> };
173
  });
174
}
175

176
/**
177
 * Wraps modules in eval() statements for better debugging
178
 * @param options - Eval dev tool options
179
 */
180
class EvalDevToolModulePlugin {
181
  constructor(options?: {
182
    moduleFilenameTemplate?: string | ((info: any) => string);
183
    sourceUrlComment?: string;
184
  });
185
}
186

187
/**
188
 * Reports compilation progress during builds
189
 * @param options - Progress reporting configuration
190
 */
191
class ProgressPlugin {
192
  constructor(options?: {
193
    activeModules?: boolean;
194
    entries?: boolean;
195
    handler?: (percentage: number, message: string, ...args: string[]) => void;
196
    modules?: boolean;
197
    modulesCount?: number;
198
    profile?: boolean;
199
    dependencies?: boolean;
200
    dependenciesCount?: number;
201
    percentBy?: 'entries' | 'modules' | 'dependencies' | null;
202
  });
203
}
204
```
205

206
**Usage Examples:**
207

208
```javascript
209
const webpack = require("webpack");
210

211
module.exports = {
212
  mode: 'development',
213
  devtool: false, // Disable default source maps
214
  plugins: [
215
    // Enable HMR
216
    new webpack.HotModuleReplacementPlugin(),
217
    
218
    // Custom source map configuration
219
    new webpack.SourceMapDevToolPlugin({
220
      filename: '[file].map',
221
      include: /\.js$/,
222
      exclude: /vendor/,
223
      moduleFilenameTemplate: 'webpack://[namespace]/[resource-path]',
224
      columns: false
225
    }),
226
    
227
    // Progress reporting
228
    new webpack.ProgressPlugin({
229
      activeModules: true,
230
      handler: (percentage, message, ...args) => {
231
        console.log(`${Math.round(percentage * 100)}%`, message, ...args);
232
      }
233
    })
234
  ]
235
};
236
```
237

238
### Optimization Plugins
239

240
Advanced optimization plugins that handle code splitting, chunk optimization, module concatenation, and production-ready optimizations.
241

242
```javascript { .api }
243
/**
244
 * Automatically splits chunks based on optimization rules
245
 * @param options - Chunk splitting configuration
246
 */
247
class SplitChunksPlugin {
248
  constructor(options?: {
249
    chunks?: 'all' | 'async' | 'initial' | ((chunk: any) => boolean);
250
    minSize?: number | { [key: string]: number };
251
    minRemainingSize?: number | { [key: string]: number };
252
    minChunks?: number;
253
    maxAsyncRequests?: number;
254
    maxInitialRequests?: number;
255
    enforceSizeThreshold?: number | { [key: string]: number };
256
    cacheGroups?: {
257
      [key: string]: {
258
        test?: RegExp | string | ((module: any) => boolean);
259
        name?: string | false | ((module: any) => string);
260
        chunks?: 'all' | 'async' | 'initial' | ((chunk: any) => boolean);
261
        minSize?: number;
262
        minChunks?: number;
263
        maxAsyncRequests?: number;
264
        maxInitialRequests?: number;
265
        priority?: number;
266
        reuseExistingChunk?: boolean;
267
        enforce?: boolean;
268
      };
269
    };
270
    fallbackCacheGroup?: {
271
      minSize?: number;
272
      maxAsyncRequests?: number;
273
      maxInitialRequests?: number;
274
    };
275
    hidePathInfo?: boolean;
276
  });
277
}
278

279
/**
280
 * Extracts webpack runtime code into a separate chunk
281
 * @param options - Runtime chunk configuration
282
 */
283
class RuntimeChunkPlugin {
284
  constructor(options?: {
285
    name?: string | ((entrypoint: any) => string) | { name: string | ((entrypoint: any) => string) };
286
  });
287
}
288

289
/**
290
 * Concatenates modules in the same scope to reduce bundle size (scope hoisting)
291
 */
292
class ModuleConcatenationPlugin {
293
  constructor();
294
}
295

296
/**
297
 * Merges chunks aggressively to reduce the number of HTTP requests
298
 * @param options - Merging configuration
299
 */
300
class AggressiveMergingPlugin {
301
  constructor(options?: {
302
    minSizeReduce?: number;
303
    moveToParents?: boolean;
304
  });
305
}
306

307
/**
308
 * Limits the maximum number of chunks to control resource loading
309
 * @param options - Chunk count limits
310
 */
311
class LimitChunkCountPlugin {
312
  constructor(options: {
313
    maxChunks: number;
314
    chunkOverhead?: number;
315
    entryChunkMultiplicator?: number;
316
  });
317
}
318

319
/**
320
 * Ensures chunks meet minimum size requirements
321
 * @param options - Minimum size configuration
322
 */
323
class MinChunkSizePlugin {
324
  constructor(options: {
325
    minChunkSize: number;
326
  });
327
}
328

329
/**
330
 * Generates content-based hashes for long-term caching
331
 * @param options - Hash generation options
332
 */
333
class RealContentHashPlugin {
334
  constructor(options?: {
335
    hashFunction?: string;
336
    hashDigest?: string;
337
  });
338
}
339
```
340

341
**Usage Examples:**
342

343
```javascript
344
const webpack = require("webpack");
345

346
module.exports = {
347
  optimization: {
348
    splitChunks: {
349
      chunks: 'all',
350
      cacheGroups: {
351
        vendor: {
352
          test: /[\\/]node_modules[\\/]/,
353
          name: 'vendors',
354
          chunks: 'all',
355
          priority: 10
356
        },
357
        common: {
358
          minChunks: 2,
359
          chunks: 'all',
360
          name: 'common',
361
          priority: 5,
362
          reuseExistingChunk: true
363
        }
364
      }
365
    },
366
    runtimeChunk: {
367
      name: 'runtime'
368
    }
369
  },
370
  plugins: [
371
    new webpack.optimize.ModuleConcatenationPlugin(),
372
    new webpack.optimize.LimitChunkCountPlugin({
373
      maxChunks: 5
374
    }),
375
    new webpack.optimize.RealContentHashPlugin()
376
  ]
377
};
378
```
379

380
### Asset Management Plugins
381

382
Plugins for managing build assets including cleaning output directories and adding file banners.
383

384
```javascript { .api }
385
/**
386
 * Cleans the output directory before each build
387
 * @param options - Cleaning configuration
388
 */
389
class CleanPlugin {
390
  constructor(options?: {
391
    dry?: boolean;
392
    keep?: string | RegExp | ((filename: string) => boolean);
393
    cleanOnceBeforeBuildPatterns?: string[];
394
    cleanAfterEveryBuildPatterns?: string[];
395
    dangerouslyAllowCleanPatternsOutsideProject?: boolean;
396
  });
397
}
398

399
/**
400
 * Adds banner comments to the top of generated files
401
 * @param options - Banner configuration
402
 */
403
class BannerPlugin {
404
  constructor(options: string | {
405
    banner: string | ((data: any) => string);
406
    raw?: boolean;
407
    entryOnly?: boolean;
408
    test?: string | RegExp | Array<string | RegExp>;
409
    include?: string | RegExp | Array<string | RegExp>;
410
    exclude?: string | RegExp | Array<string | RegExp>;
411
    footer?: boolean;
412
    stage?: number;
413
  });
414
}
415
```
416

417
**Usage Examples:**
418

419
```javascript
420
const webpack = require("webpack");
421

422
module.exports = {
423
  plugins: [
424
    // Clean output directory
425
    new webpack.CleanPlugin({
426
      cleanAfterEveryBuildPatterns: ['**/*', '!important.js']
427
    }),
428
    
429
    // Add copyright banner
430
    new webpack.BannerPlugin({
431
      banner: '/*! Copyright 2023 MyCompany */\n',
432
      raw: true,
433
      test: /\.js$/
434
    })
435
  ]
436
};
437
```
438

439
### Module ID Plugins
440

441
Plugins that control how webpack generates IDs for modules and chunks, affecting caching and deterministic builds.
442

443
```javascript { .api }
444
/**
445
 * Generates deterministic chunk IDs based on chunk content
446
 * @param options - Deterministic ID options
447
 */
448
class DeterministicChunkIdsPlugin {
449
  constructor(options?: {
450
    context?: string;
451
    maxLength?: number;
452
  });
453
}
454

455
/**
456
 * Generates deterministic module IDs based on module content and context
457
 * @param options - Deterministic module ID options
458
 */
459
class DeterministicModuleIdsPlugin {
460
  constructor(options?: {
461
    context?: string;
462
    maxLength?: number;
463
  });
464
}
465

466
/**
467
 * Uses human-readable names for chunk IDs in development
468
 * @param options - Named chunk ID options
469
 */
470
class NamedChunkIdsPlugin {
471
  constructor(options?: {
472
    delimiter?: string;
473
    context?: string;
474
  });
475
}
476

477
/**
478
 * Uses human-readable names for module IDs in development
479
 * @param options - Named module ID options
480
 */
481
class NamedModuleIdsPlugin {
482
  constructor(options?: {
483
    context?: string;
484
  });
485
}
486

487
/**
488
 * Generates short hash-based module IDs for production
489
 * @param options - Hash generation options
490
 */
491
class HashedModuleIdsPlugin {
492
  constructor(options?: {
493
    context?: string;
494
    hashFunction?: string;
495
    hashDigest?: string;
496
    hashDigestLength?: number;
497
  });
498
}
499

500
/**
501
 * Uses natural numbers as module IDs (webpack 4 behavior)
502
 */
503
class NaturalModuleIdsPlugin {
504
  constructor();
505
}
506
```
507

508
### Module Federation Plugins
509

510
Plugins enabling micro-frontend architectures through module federation capabilities.
511

512
```javascript { .api }
513
/**
514
 * Creates a container that exposes modules for consumption by other builds
515
 * @param options - Container configuration
516
 */
517
class ContainerPlugin {
518
  constructor(options: {
519
    name: string;
520
    library?: LibraryOptions;
521
    filename?: string;
522
    runtime?: string | false;
523
    shareScope?: string;
524
    exposes: { [key: string]: string };
525
  });
526
}
527

528
/**
529
 * Consumes modules from external containers
530
 * @param options - Container reference configuration
531
 */
532
class ContainerReferencePlugin {
533
  constructor(options: {
534
    remoteType: string;
535
    remotes: { [key: string]: string | string[] };
536
    shareScope?: string;
537
  });
538
}
539

540
/**
541
 * Complete module federation setup combining container and reference functionality
542
 * @param options - Module federation configuration
543
 */
544
class ModuleFederationPlugin {
545
  constructor(options: {
546
    name?: string;
547
    filename?: string;
548
    runtime?: string | false;
549
    library?: LibraryOptions;
550
    remoteType?: string;
551
    remotes?: { [key: string]: string | string[] };
552
    exposes?: { [key: string]: string };
553
    shared?: { [key: string]: SharedConfig } | string[];
554
    shareScope?: string;
555
  });
556
}
557

558
/**
559
 * Consumes shared modules from other builds
560
 * @param options - Shared consumption configuration
561
 */
562
class ConsumeSharedPlugin {
563
  constructor(options: {
564
    consumes: { [key: string]: SharedConfig };
565
    shareScope?: string;
566
  });
567
}
568

569
/**
570
 * Provides modules for sharing with other builds
571
 * @param options - Shared provision configuration
572
 */
573
class ProvideSharedPlugin {
574
  constructor(options: {
575
    provides: { [key: string]: SharedConfig };
576
    shareScope?: string;
577
  });
578
}
579

580
/**
581
 * Combines consume and provide shared functionality
582
 * @param options - Share plugin configuration
583
 */
584
class SharePlugin {
585
  constructor(options: {
586
    shared: { [key: string]: SharedConfig };
587
    shareScope?: string;
588
  });
589
}
590
```
591

592
**Usage Examples:**
593

594
```javascript
595
const webpack = require("webpack");
596

597
// Host application
598
module.exports = {
599
  plugins: [
600
    new webpack.container.ModuleFederationPlugin({
601
      name: 'host',
602
      remotes: {
603
        mf1: 'mf1@http://localhost:3001/remoteEntry.js'
604
      },
605
      shared: {
606
        react: { singleton: true },
607
        'react-dom': { singleton: true }
608
      }
609
    })
610
  ]
611
};
612

613
// Remote application
614
module.exports = {
615
  plugins: [
616
    new webpack.container.ModuleFederationPlugin({
617
      name: 'mf1',
618
      filename: 'remoteEntry.js',
619
      exposes: {
620
        './Component': './src/Component'
621
      },
622
      shared: {
623
        react: { singleton: true },
624
        'react-dom': { singleton: true }
625
      }
626
    })
627
  ]
628
};
629
```
630

631
### Platform-Specific Plugins
632

633
Plugins that provide platform-specific functionality for web browsers, Node.js, Electron, and Web Workers.
634

635
```javascript { .api }
636
// Web Platform Plugins
637
/**
638
 * Enables JSONP-based chunk loading for web environments
639
 * @param options - JSONP template options
640
 */
641
class JsonpTemplatePlugin {
642
  constructor(options?: {
643
    asyncChunkLoading?: boolean;
644
  });
645
}
646

647
/**
648
 * Enables WebAssembly compilation using fetch API for web
649
 * @param options - Fetch WASM options
650
 */
651
class FetchCompileWasmPlugin {
652
  constructor(options?: {
653
    mangleImports?: boolean;
654
  });
655
}
656

657
/**
658
 * Enables async WebAssembly compilation for web environments
659
 * @param options - Async WASM options
660
 */
661
class FetchCompileAsyncWasmPlugin {
662
  constructor(options?: {
663
    mangleImports?: boolean;
664
  });
665
}
666

667
// Node.js Platform Plugins
668
/**
669
 * Sets up Node.js environment for webpack builds
670
 * @param options - Node environment options
671
 */
672
class NodeEnvironmentPlugin {
673
  constructor(options?: {
674
    infrastructureLogging?: any;
675
  });
676
}
677

678
/**
679
 * Handles Node.js built-in modules and polyfills
680
 * @param options - Node source plugin options
681
 */
682
class NodeSourcePlugin {
683
  constructor(options?: {
684
    [key: string]: boolean | 'mock' | 'empty';
685
  });
686
}
687

688
/**
689
 * Configures build target for Node.js environments
690
 * @param options - Node target options
691
 */
692
class NodeTargetPlugin {
693
  constructor(options?: {
694
    asyncChunkLoading?: boolean;
695
  });
696
}
697

698
/**
699
 * Provides Node.js-specific code generation templates
700
 */
701
class NodeTemplatePlugin {
702
  constructor();
703
}
704

705
// Other Platform Plugins
706
/**
707
 * Configures build for Electron applications (main and renderer processes)
708
 * @param context - Target context ('main' | 'renderer' | 'preload')
709
 */
710
class ElectronTargetPlugin {
711
  constructor(context?: 'main' | 'renderer' | 'preload');
712
}
713

714
/**
715
 * Provides code generation templates for Web Worker environments
716
 */
717
class WebWorkerTemplatePlugin {
718
  constructor();
719
}
720
```
721

722
### Entry and Loading Plugins
723

724
Plugins that manage entry points, chunk loading mechanisms, and module resolution.
725

726
```javascript { .api }
727
/**
728
 * Adds entry points to the compilation
729
 * @param context - Entry context directory
730
 * @param entry - Entry module path
731
 * @param options - Entry configuration options
732
 */
733
class EntryPlugin {
734
  constructor(context: string, entry: string, options?: string | EntryOptions);
735
}
736

737
/**
738
 * Supports dynamically determined entry points
739
 * @param context - Entry context directory
740
 * @param entry - Function returning entry configuration
741
 * @param options - Entry options
742
 */
743
class DynamicEntryPlugin {
744
  constructor(
745
    context: string,
746
    entry: () => string | EntryObject | Promise<string | EntryObject>,
747
    options?: string | EntryOptions
748
  );
749
}
750

751
/**
752
 * Processes and validates entry configuration from webpack config
753
 * @param context - Base context directory
754
 */
755
class EntryOptionPlugin {
756
  constructor(context?: string);
757
}
758

759
/**
760
 * Enables JavaScript chunk loading mechanisms
761
 * @param options - Chunk loading configuration
762
 */
763
class EnableChunkLoadingPlugin {
764
  constructor(options: {
765
    type: string;
766
    enableAsync?: boolean;
767
  });
768
}
769

770
/**
771
 * Enables WebAssembly loading mechanisms
772
 * @param options - WASM loading configuration
773
 */
774
class EnableWasmLoadingPlugin {
775
  constructor(options: {
776
    type: string;
777
  });
778
}
779

780
/**
781
 * Core JavaScript module processing and code generation
782
 * @param options - JavaScript modules options
783
 */
784
class JavascriptModulesPlugin {
785
  constructor(options?: {
786
    chunkFormat?: string;
787
  });
788
}
789
```
790

791
### Specialized Plugins
792

793
Additional specialized plugins for CSS modules, library output, caching, and experimental features.
794

795
```javascript { .api }
796
/**
797
 * Provides support for CSS modules with local scope
798
 * @param options - CSS modules configuration
799
 */
800
class CssModulesPlugin {
801
  constructor(options?: {
802
    localIdentName?: string;
803
    namedExport?: boolean;
804
  });
805
}
806

807
/**
808
 * Abstract base class for library output plugins
809
 */
810
abstract class AbstractLibraryPlugin {
811
  constructor(options: {
812
    type: string;
813
  });
814
}
815

816
/**
817
 * Enables library output functionality
818
 * @param type - Library output type
819
 */
820
class EnableLibraryPlugin {
821
  constructor(type: string);
822
}
823

824
/**
825
 * In-memory caching implementation for development
826
 * @param options - Memory cache options
827
 */
828
class MemoryCachePlugin {
829
  constructor(options?: {
830
    maxGenerations?: number;
831
    cacheUnaffected?: boolean;
832
  });
833
}
834

835
/**
836
 * Support for async WebAssembly modules
837
 * @param options - Async WebAssembly options
838
 */
839
class AsyncWebAssemblyModulesPlugin {
840
  constructor(options?: {
841
    mangleImports?: boolean;
842
  });
843
}
844

845
/**
846
 * Experimental support for HTTP/HTTPS module resolution
847
 * @param options - HTTP URI plugin options
848
 */
849
class HttpUriPlugin {
850
  constructor(options?: {
851
    allowedUris?: Array<string | RegExp | ((uri: string) => boolean)>;
852
    cacheLocation?: string | false;
853
    frozen?: boolean;
854
    lockfileLocation?: string;
855
    upgrade?: boolean;
856
  });
857
}
858
```
859

860
### Additional Core Plugins
861

862
Essential plugins for DLL support, external modules, loader configuration, and build optimization.
863

864
```javascript { .api }
865
/**
866
 * Creates a DLL bundle for better build performance
867
 * @param options - DLL plugin configuration
868
 */
869
class DllPlugin {
870
  constructor(options: {
871
    context?: string;
872
    format?: boolean;
873
    name: string;
874
    path: string;
875
    entryOnly?: boolean;
876
    type?: string;
877
  });
878
}
879

880
/**
881
 * References a DLL bundle in the current build
882
 * @param options - DLL reference configuration
883
 */
884
class DllReferencePlugin {
885
  constructor(options: {
886
    context?: string;
887
    manifest: object | string;
888
    content?: object;
889
    name?: string;
890
    scope?: string;
891
    sourceType?: string;
892
    type?: string;
893
  });
894
}
895

896
/**
897
 * Delegates module resolution to other webpack builds
898
 * @param options - Delegation configuration
899
 */
900
class DelegatedPlugin {
901
  constructor(options: {
902
    source?: string;
903
    type?: string;
904
    context?: string;
905
    content: object;
906
    extensions?: string[];
907
  });
908
}
909

910
/**
911
 * Adds external dependencies without bundling them
912
 * @param externals - External module configuration
913
 */
914
class ExternalsPlugin {
915
  constructor(type: string, externals: ExternalItem | ExternalItem[]);
916
}
917

918
/**
919
 * Configures loader options globally (deprecated in webpack 2+)
920
 * @param options - Loader options
921
 */
922
class LoaderOptionsPlugin {
923
  constructor(options: {
924
    minimize?: boolean;
925
    debug?: boolean;
926
    options?: object;
927
    [key: string]: any;
928
  });
929
}
930

931
/**
932
 * Sets the target environment for loaders
933
 * @param target - Loader target environment
934
 */
935
class LoaderTargetPlugin {
936
  constructor(target: string);
937
}
938

939
/**
940
 * Prevents webpack from emitting assets when there are compilation errors
941
 */
942
class NoEmitOnErrorsPlugin {
943
  constructor();
944
}
945

946
/**
947
 * Automatically prefetch modules for better performance
948
 * @param context - Module context
949
 * @param request - Module request
950
 */
951
class AutomaticPrefetchPlugin {
952
  constructor(context?: string, request?: string);
953
}
954

955
/**
956
 * Manually prefetch modules
957
 * @param context - Module context
958
 * @param request - Module request
959
 */
960
class PrefetchPlugin {
961
  constructor(context: string | null, request: string);
962
}
963

964
/**
965
 * Creates a manifest file for DLL libraries
966
 * @param options - Manifest generation options
967
 */
968
class LibManifestPlugin {
969
  constructor(options?: {
970
    context?: string;
971
    format?: boolean;
972
    name?: string;
973
    path?: string;
974
    type?: string;
975
  });
976
}
977

978
/**
979
 * Ignores files during the build process based on patterns
980
 * @param paths - Glob patterns or RegExp for files to ignore during watching
981
 */
982
class WatchIgnorePlugin {
983
  constructor(paths: (string | RegExp)[] | RegExp);
984
}
985

986
/**
987
 * Adds a banner comment to the top of generated chunks
988
 * @param options - Banner configuration
989
 */
990
class BannerPlugin {
991
  constructor(options: string | {
992
    banner: string | (() => string);
993
    raw?: boolean;
994
    entryOnly?: boolean;
995
    test?: string | RegExp | (string | RegExp)[];
996
    include?: string | RegExp | (string | RegExp)[];
997
    exclude?: string | RegExp | (string | RegExp)[];
998
  });
999
}
1000

1001
/**
1002
 * Sets the target platform for the build
1003
 * @param platform - Target platform
1004
 */
1005
class PlatformPlugin {
1006
  constructor(platform?: string);
1007
}
1008

1009
/**
1010
 * Removes assets from the build that exceed size limits
1011
 * @param options - Size limit configuration
1012
 */
1013
class CleanPlugin {
1014
  constructor(options?: {
1015
    cleanStaleWebpackAssets?: boolean;
1016
    protectWebpackAssets?: boolean;
1017
    cleanOnceBeforeBuildPatterns?: string[];
1018
    cleanAfterEveryBuildPatterns?: string[];
1019
    dangerouslyAllowCleanPatternsOutsideProject?: boolean;
1020
    dry?: boolean;
1021
    verbose?: boolean;
1022
  });
1023
}
1024
```
1025

1026
### Deprecated Plugins
1027

1028
Plugins that are deprecated but still available for compatibility.
1029

1030
```javascript { .api }
1031
/**
1032
 * @deprecated Use SplitChunksPlugin instead
1033
 * Aggressively splits chunks for better caching
1034
 */
1035
class AggressiveSplittingPlugin {
1036
  constructor(options?: {
1037
    minSize?: number;
1038
    maxSize?: number;
1039
    chunkOverhead?: number;
1040
    entryChunkMultiplicator?: number;
1041
  });
1042
}
1043

1044
/**
1045
 * @deprecated Use EntryPlugin instead
1046
 * Creates a single entry point (renamed to EntryPlugin)
1047
 */
1048
class SingleEntryPlugin {
1049
  constructor(context: string, entry: string, name?: string);
1050
}
1051

1052
/**
1053
 * @deprecated Use compilation.outputOptions.library instead
1054
 * Template plugin for library output
1055
 */
1056
class LibraryTemplatePlugin {
1057
  constructor(name: any, target?: string, umdNamedDefine?: boolean, auxiliaryComment?: any, exportProperty?: string | string[]);
1058
}
1059
```
1060

1061
## Common Types
1062

1063
```javascript { .api }
1064
interface WebpackPluginInstance {
1065
  apply(compiler: Compiler): void;
1066
}
1067

1068
type WebpackPluginFunction = (compiler: Compiler) => void;
1069

1070
interface EntryOptions {
1071
  name?: string;
1072
  runtime?: string | false;
1073
  dependOn?: string | string[];
1074
  publicPath?: string;
1075
  chunkLoading?: ChunkLoadingType;
1076
  asyncChunks?: boolean;
1077
  wasmLoading?: WasmLoadingType;
1078
  library?: LibraryOptions;
1079
}
1080

1081
interface SharedConfig {
1082
  shareKey?: string;
1083
  shareScope?: string;
1084
  version?: string | false;
1085
  singleton?: boolean;
1086
  strictVersion?: boolean;
1087
  requiredVersion?: string | false;
1088
  packageName?: string;
1089
  sharedName?: string;
1090
  eager?: boolean;
1091
}
1092

1093
interface LibraryOptions {
1094
  name?: string | string[] | LibraryCustomUmdObject;
1095
  type?: string;
1096
  export?: string | string[];
1097
  auxiliaryComment?: string | LibraryCustomUmdCommentObject;
1098
  umdNamedDefine?: boolean;
1099
}
1100

1101
type ChunkLoadingType = 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import';
1102
type WasmLoadingType = 'fetch-streaming' | 'fetch' | 'async-node' | 'sync';
1103
```
1104

1105
## Plugin Architecture
1106

1107
All webpack plugins implement the `WebpackPluginInstance` interface and use the compiler's hooks system for integration:
1108

1109
```javascript
1110
class CustomPlugin {
1111
  apply(compiler) {
1112
    compiler.hooks.compilation.tap('CustomPlugin', (compilation) => {
1113
      // Plugin logic using compilation hooks
1114
      compilation.hooks.processAssets.tap({
1115
        name: 'CustomPlugin',
1116
        stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE
1117
      }, (assets) => {
1118
        // Process assets
1119
      });
1120
    });
1121
  }
1122
}
1123

1124
module.exports = {
1125
  plugins: [
1126
    new CustomPlugin()
1127
  ]
1128
};
1129
```
1130

1131
The plugin system supports both class-based and function-based plugins, with class-based plugins being the recommended approach for complex functionality.