Plugins

Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack flexible.

The plugins below are grouped by what they do. Most ship with webpack itself and are used as new webpack.SomePlugin(); the ones whose page lives under a *-webpack-plugin name are separate packages to install first.

Sources and modules

Name	Description
DefinePlugin	Allow global constants configured at compile time
EnvironmentPlugin	Shorthand for using the DefinePlugin on process.env keys
ProvidePlugin	Use modules without having to use import/require
IgnorePlugin	Exclude certain modules from bundles
NormalModuleReplacementPlugin	Replace resource(s) that matches a regexp
ContextReplacementPlugin	Override the inferred context of a require expression
ContextExclusionPlugin	Exclude matching contexts so webpack does not generate modules for them
VirtualUrlPlugin	Create modules whose content is generated at build time, with no file on disk

Output and assets

Name	Description
BannerPlugin	Add a banner to the top of each generated chunk
CopyPlugin	Copy files and directories into the output directory
CopyWebpackPlugin	Superseded by the built-in CopyPlugin
ManifestPlugin	Generate an asset manifest mapping source filenames to emitted output files
CompressionWebpackPlugin	Prepare compressed versions of assets to serve them with Content-Encoding
ChunksWebpackPlugin	Create HTML files with entrypoints and chunks relations to serve your bundles
SvgChunkWebpackPlugin	Generate SVG sprites optimized by SVGO based on your entry point dependencies

Chunks and optimization

Name	Description
SplitChunksPlugin	Extract shared and vendor code into separate chunks — configured through optimization.splitChunks
ModuleConcatenationPlugin	Scope hoisting — on by default in production via optimization.concatenateModules
MergeDuplicateChunksPlugin	Merge chunks that contain the same modules
LimitChunkCountPlugin	Limit the maximum number of chunks by merging them
MinChunkSizePlugin	Keep chunk size above the specified limit
MinimizerPlugin	Uses Terser (or other) to minify the JS/CSS/HTML/JSON/etc in your project
HashedModuleIdsPlugin	Hash-based module IDs — use optimization.moduleIds: 'deterministic' instead, which is the production default
NoEmitOnErrorsPlugin	Skip the emitting phase when there are compilation errors
AutomaticPrefetchPlugin	Resolve all modules from the previous compilation upfront to speed up watch rebuilds
PrefetchPlugin	Resolve and build a module ahead of its first import to shorten the critical build path
DllPlugin	Split bundles into a pre-built vendor bundle — largely replaced by the filesystem cache

Module Federation

Name	Description
ModuleFederationPlugin	Share modules between independently built applications at runtime

Development and diagnostics

Name	Description
HotModuleReplacementPlugin	Enable Hot Module Replacement (HMR)
SourceMapDevToolPlugin	Enables a more fine grained control of source maps
EvalSourceMapDevToolPlugin	Enables a more fine grained control of eval source maps
ProgressPlugin	Report compilation progress
ProfilingPlugin	Record plugin execution timings to a Chrome profile file
WatchIgnorePlugin	Ignore matching paths in watch mode so they do not trigger rebuilds
DiagnosticsWebpackPlugin	Run linters and other diagnostic tools over your sources during the build

For more third-party plugins, see the list from awesome-webpack.