In this section, we’ll look at plugins in Webpack. Plugins are powerful tools that allow Webpack to perform a wide range of tasks, from tuning and compressing to redefining variables in your environment.

Plugins and Loaders are two confusing concepts in Webpack. Loaders are used to convert the source code of a module, so the execution level of a loader is a single source file. The purpose of the plug-in is to solve the problem that the loader cannot realize, so the plug-in is more powerful, and the execution level of the plug-in is the whole build process.

References are not required when using a loader, as we learned in the last section. To use a plug-in, we must first refer to it through require. Webpack has a rich set of built-in and external plug-ins, and allows users to customize the plug-ins.

Installing a plug-in

For example, let’s take the HTML-webpack-plugin, which is commonly used in practical applications, as an example to explain the specific use of plug-ins. The HTML-webpack-plugin can be used to automatically generate basic HTML pages.

First we need to install the HTML -webpack-plugin. The command looks like this:

npm install html-webpack-plugin --save-dev

Once installed, the plug-in is automatically added to the dependencies in the package.json file and the version of the plug-in is specified, as shown in the figure below:

"DevDependencies" : {" CSS - loader ":" ^ 3.6.0 ", "HTML - webpack - plugin" : "^ 4.3.0", "style - loader" : "^ 1.2.1", "webpack" : "^ 4.43.0 webpack - dev -", "server" : "^ 3.11.0"}

Configure the plug-in

After the plug-in is installed, we introduce it in the configuration file webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // References external plug-ins

Then add the plugins node to the configuration, which contains the plug-in instance. Plugins represent the plug-in entry point, where all plug-ins are configured.

const HtmlWebpackPlugin = require('html-webpack-plugin'); // exports = {entry: {entry:'./index.js',}, output: { path:__dirname + '/dist', filename:'./bundle.js' }, module:{ rules:[ { test:/.css$/, use:['style-loader','css-loader'] }] }, mode: 'production', plugins: [ new HtmlWebpackPlugin() ] }

Once configured, you can execute the NPM run build command, which automatically generates an index.html file in the dist directory. Index.html is the default file name.

We can also configure related properties in the plug-in, such as:

New HtmlWebpackPlugin({title: 'Getting started with webpack ', filename: 'new_test.html'})

An HTML file named new_test.html is generated in the dist directory with the title “Getting Started with Webpack.”

Properties of the HTML -webpack-plugin:

  • title: Generates the title of the HTML file.
  • filename: The file name of the output HTML.
  • template: Path to the file where the HTML template resides.
  • inject: Injection option with an optional value oftrue,body,head,false.
  • favicon: Set up a web icon.
  • minify: Compresses HTML files with a compression option or property valuefalse.

Commonly used plugins

There are many plugins in Webpack. Here are some of the most commonly used plugins to look at:

  • extract-text-webpack-plugin: Generate CSS files instead of inlining them. The main plug-in is for pulling awaycssStyles to prevent styles from being packaged injsA phenomenon that causes page style loading disorders in.
  • DefinePlugin: Define the global constants plugin, we can use these variables directly in the module, without any declaration.DefinePlugin 是 webpackBuilt-in plug-ins.
  • EnvironmentPlugin: Defines environment variable plug-ins.
  • BannerPlugin: Add copyright comments, etc., to your code.
  • HotModuleReplacementPlugin: Module hot update plugin, enables module hot replacement function, by listening for file changes and automatically load the modified files to reduce the annoying manual browser reload.
  • ProgressPlugin: Build the progress plug-in.
  • ProvidePlugin: Automatically load modules, such as appear$Then load common libraries such as jQuery.
  • IgnorePlugin: Used to ignore part of the file.

Link: https://www.9xkd.com/