What is the role of Plugin in Webpack? What are the commonly used plugins?

Let’s talk about common Plugins in webpack? What problem was solved? - Question details - Front-end interview questions guide

1. The function of plugin 

PluginA computer application that interacts with the main application to provide specific functionality .

It is a program written according to a certain standard application program interface. It can only run under the system specified by the program because it needs to call the function library or data provided by the original pure system.

webpackThe same is true for plugin, plugingiving it various flexible functions, such as packaging optimization, resource management, environment variable injection, etc., which will run in  webpack different stages (hook/life cycle) throughout the entire compilation cycle.webpack

The purpose is to solve  loader something else that cannot be achieved.

Configuration method: In general plugins, the newinstance the attributes in the exported object through the configuration file . As follows:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 访问内置的插件
module.exports = {
  ...
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

2. Common Plugins

html-webpack-plugin : Simplify HTML file creation (depends on html-loader);

After the packaging is completed, an html file is automatically generated, and the js module generated by the packaging is introduced into the html

mini-css-extract-plugin : separates style files, extracts CSS into separate files, and supports loading on demand

(replaces extract-text-webpack-plugin); 

uglifyjs-webpack-plugin : Compresses ES6 code through UglifyES, does not support ES6 compression (before Webpack4);

terser-webpack-plugin: Support compressing ES6 code (Webpack4);

webpack-bundle-analyzer : Visualize the volume of webpack output files;

optimize-css-plugin: compress CSS;

copy-webpack-plugin: Copy files or directories to the execution area;

For example, during the packaging process of Vue, if we put some files in the public directory, then this directory will be copied to the dist folder 

define-plugin : define environment variables;

Allows creation of configured global objects at compile time; (after Webpack 4, specifying mode will automatically configure it)

It is a built-in plug-in of webpack and does not need to be installed. 

webpack-parallel-uglify-plugin : multi-core compression, improve compression speed ( multi-process execution code compression , improve build speed )

Compress JavaScript code in parallel to increase build speed, especially in large projects.

clean-webpack-plugin: Delete (clean) the build directory;

ignore-plugin: Ignore some files;