Plugins
The Power of Plugins
Plugins are the backbone of webpack. They serve the purpose of doing anything else that a loader cannot do. Webpack itself is built on the same plugin system that you use in your configuration.
Extensibility: Plugins can hook into the entire compilation lifecycle to perform complex tasks.
Optimization: Use plugins for bundle minification, asset management, and environment variable injection.
Built-in vs Third-party: Webpack provides many internal plugins (like
DefinePlugin), but the community offers thousands more for specialized needs.
Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack flexible.
| Name | Description |
|---|---|
BannerPlugin | Add a banner to the top of each generated chunk |
ChunksWebpackPlugin | Create HTML files with entrypoints and chunks relations to serve your bundles |
CompressionWebpackPlugin | Prepare compressed versions of assets to serve them with Content-Encoding |
ContextReplacementPlugin | Override the inferred context of a require expression |
CopyWebpackPlugin | Copies individual files or entire directories to the build directory |
DefinePlugin | Allow global constants configured at compile time |
DllPlugin | Split bundles in order to drastically improve build time |
EnvironmentPlugin | Shorthand for using the DefinePlugin on process.env keys |
EslintWebpackPlugin | A ESLint plugin for webpack |
HotModuleReplacementPlugin | Enable Hot Module Replacement (HMR) |
HtmlWebpackPlugin | Easily create HTML files to serve your bundles |
IgnorePlugin | Exclude certain modules from bundles |
LimitChunkCountPlugin | Set min/max limits for chunking to better control chunking |
MergeDuplicateChunksPlugin | Merge chunks that contain the same modules |
MinChunkSizePlugin | Keep chunk size above the specified limit |
MiniCssExtractPlugin | creates a CSS file per JS file which requires CSS |
NoEmitOnErrorsPlugin | Skip the emitting phase when there are compilation errors |
NormalModuleReplacementPlugin | Replace resource(s) that matches a regexp |
ProgressPlugin | Report compilation progress |
ProvidePlugin | Use modules without having to use import/require |
SourceMapDevToolPlugin | Enables a more fine grained control of source maps |
EvalSourceMapDevToolPlugin | Enables a more fine grained control of eval source maps |
SvgChunkWebpackPlugin | Generate SVG sprites optimized by SVGO based on your entry point dependencies |
TerserPlugin | Uses Terser to minify the JS in your project |
For more third-party plugins, see the list from awesome-webpack.
10 Contributors
