Plugins

While Loaders handle the transformation of specific individual files, Plugins participate broadly across the build process, taking care of bundle manipulation, asset management, and other broad operations like HTML generation, environment variable injection, and output minification.

Major Plugins

• HtmlWebpackPlugin: Automatically generates an HTML file that includes all your webpack bundles.
• MiniCssExtractPlugin: Extracts CSS into separate files, which creates a CSS file per JS file which contains CSS, reducing the bundle size and allowing parallel loading of CSS.
• DefinePlugin: Allows the creation of global constants which can be configured at compile time (a built-in Webpack plugin).
• CopyWebpackPlugin: Copies individual files or entire directories, which already exist, to the build directory.

Plugin Configuration and Usage

To use a plugin, you must require() it and add it to the plugins array in your configuration file.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // Required for built-in plugins

module.exports = {
  // ... omitted ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Original HTML template
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    }),
  ],
};

Each plugin must be instantiated with new so that it can be reused multiple times for different purposes across the webpack configuration.