A webpack plugin is a JavaScript object that has an apply method. This apply method is called by the webpack compiler, giving access to the entire compilation lifecycle. Plugins are used for performing actions or tasks on the entire bundle. They can be used for various purposes, such as code splitting, minification, and adding environment-specific variables. const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); //to access built-in plugins module.exports = { module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }], }, plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })], };

What are plugins?

Difficulty: 5/10

plugin lifecycle, custom plugin development, plugin vs loader

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

In order to use a plugin, you need to require() it and add it to the plugins array. Most plugins are customizable through options. Since you can use a plugin multiple times in a configuration for different purposes, you need to create an instance of it by calling it with the new operator.

1
A webpack plugin is a JavaScript object that has an apply method. This apply method is called by the webpack compiler, giving access to the entire compilation lifecycle.
2
Plugins are used for performing actions or tasks on the entire bundle.
3
They can be used for various purposes, such as code splitting, minification, and adding environment-specific variables.

the html-webpack-plugin generates an HTML file for your application and automatically injects all your generated bundles into this file.

Scenario Questions

0-2 years experience

2-5 years experience

1Your team added a third‑party minification plugin, but after the upgrade the build fails with 'Compilation error: Unexpected token'. How would you troubleshoot the issue?

Follow-up Questions