Plugins Overview

Learn about webpack’s plugin system and available built-in plugins

Webpack has a rich plugin system that allows you to extend its functionality. Plugins can modify compilation results, add optimization strategies, inject variables, and much more.

Plugin Categories

Built-in Plugins

Webpack includes several powerful built-in plugins:

• HotModuleReplacementPlugin - Enable Hot Module Replacement (HMR)
• ProvidePlugin - Automatically load modules as free variables
• BannerPlugin - Add a banner to the top of generated chunks
• CleanPlugin - Clean the output directory before builds
• DotenvPlugin - Load environment variables from .env files
• IgnorePlugin - Exclude modules matching patterns
• EnvironmentPlugin - Define environment variables
• NormalModuleReplacementPlugin - Replace modules matching patterns
• ContextReplacementPlugin - Override context module resolution
• DllPlugin - Split bundles for faster builds
• ProgressPlugin - Report compilation progress

Optimization Plugins

Plugins that optimize your bundle:

• SplitChunksPlugin - Split code into separate chunks
• ModuleConcatenationPlugin - Enable scope hoisting
• LimitChunkCountPlugin - Limit the number of chunks
• MinChunkSizePlugin - Merge small chunks

External Plugins

Popular community plugins:

• HtmlWebpackPlugin - Simplify HTML file creation
• MiniCssExtractPlugin - Extract CSS into separate files

Using Plugins

Plugins are added to your webpack configuration:

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProgressPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
};

Creating Custom Plugins

Webpack plugins are JavaScript objects with an apply method that is called by the webpack compiler:

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('MyPlugin', (stats) => {
      console.log('Build complete!');
    });
  }
}

For more information on creating custom plugins, see Define a Plugin.