Plugins serve the purpose of doing everything that a loader cannot do. Loaders often help run code that is not native to Webpack and plugins do the same; however, loaders are often built by the community whereas plugins are built by Webpack's in-house developers.

Plugins are said to be the backbone of Webpack. The software is built on the same plugin system that you use in your Webpack configuration.

Webpack has a rich plugin interface and most of the features within Webpack itself use it. The following is a bulleted list of the available plugins that this section will cover in detail. Next to each name is a brief description of the plugin:

• BabelMinifyWebpackPlugin: Minificates with babel-minify
• CommonsChunkPlugin: Extracts common modules shared between chunks
• ContextReplacementPlugin: Overrides the inferred context of a require expression
• HotModuleReplacementPlugin: Enables Hot Module Replacement (HMR) (more on this later)
• HtmlWebpackPlugin: Easily creates HTML files to serve your bundles
• LimitChunkCountPlugin: Sets minimum/maximum limits for chunking to better control the process
• ProgressPlugin: Reports compilation progress
• ProvidePlugin: Uses modules without having to use import/require
• TerserPlugin: Enables control of the version of Terser in your project

There are many more plugins available on the Webpack community pages; however, the preceding list illustrates the more salient and useful ones. Next, we will go over each one with a detailed explanation.

The installation of each plugin follows the same process as the one used for loaders:

1. First, install the plugin using the command line and then alter the configuration file to require the plugin, similar to the following example:

npm install full-name-of-plugin-goes-here-and-should-be-hyphenated-and-not-camelcase --save-dev

Remember, this is a generic example; you will have to add your plugin name. The same can be said of the following configuration, which follows the same procedure as most Webpack projects and the same configuration file that we previously used, webpack.config.js.

2. We should prepare our configuration file now:

const MinifyPlugin = require("full-name-of-plugin-goes-here-and-should-be-hyphenated-not-camelcase");
module.exports = {
 entry: //...,
 output: //...,
 plugins: [
 new MinifyPlugin(minifyOpts, pluginOpts)
 ]
}

That concludes your general introduction to plugins. We took a general approach to prevent over-complication. Now, we can move on to some of the intriguing aspects of the various plugins available on Webpack. In the following subsection, we will discuss the following:

• BabelMinifyWebpackPlugin
• CommonsChunkPlugin
• ContextReplacementPlugin
• HtmlWebpackPlugin
• LimitChunkCountPlugin

Most plugins are developed by Webpack inhouse and fill the development gaps that loaders are not yet able to. These are some of the more interesting ones. Let's start with BabelMinifyWebpackPlugin.