What are webpack plugins and how do they differ from loaders?

A webpack plugin works on the whole compilation, while a loader transforms one file at a time.

Loaders work at the file level. They process each matching file before its module is added to the bundle. Plugins work at the bundle level. They hook into the build process, so they can change it, add files to the output or optimize the result.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

You add a plugin by creating an instance with new in the plugins array. Here HtmlWebpackPlugin builds an HTML file from a template and adds the bundles to it.