“Webpack Core Features” plugin

preface

Have you encountered any of these problems:

• Webpack-packed files are not compressed
• Static files are manually copied to the output directory
• There is a lot of redundant code written in the code for environmental judgments

The previous “WebPack Core features” Loader talked about webPack’s Loader mechanism. This article focuses on another core feature: plugins.

The plug-in mechanism is designed to solve these problems by automating the work of a project in addition to the packaging of resource modules.

Plugins are designed to extend WebPack functionality by injecting hooks into the build process, which gives WebPack a lot of flexibility.

What are the differences between plugins and Loaders?

Loader is a converter that compiles and converts one file into another. For example, convert a.less file to a.css file.

Plugins are extenders for the entire packaging process after the loader finishes. It does not directly operate on files, but instead works based on an event mechanism. Events are broadcast at specific times in the WebPack build process, and the plug-in can listen for these events to occur and do something at specific times. These include: packaging optimization, resource management, injecting environment variables.

How should the plugin be configured?

For example, HtmlWebpackPlugin can generate an HTML file for us that includes all the modules in the body using the script tag. Here’s how to configure it:

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

const webpackConfig = {
  ...
  plugins: [new HtmlWebpackPlugin()]
};
Copy the code

Note Loader is configured in module.rules as the module parsing rule. The type is array. Each entry is an object containing properties such as test(type file), Loader, and options(parameter). Plugins are individually configured as arrays, each of which is an instance of the Plugin, and the arguments are passed in through the constructor.

What are some common plugins?

The following list of plugins is from webpack’s official website. If you are not familiar with the plugin, you can click on the name to jump to have a look and understand the specific gameplay.

How do I write a plugin?

Before I talk about how to write plugins, let’s take a look at some of the fun things: tapable, Compiler, and Compilation.

tapable

Tapable is a library similar to NodeJS EventEmitter, which controls the publishing and subscription of hook functions. Of course, the hook mechanism provided by Tapable is more comprehensive, which is divided into synchronous and asynchronous two categories (asynchronous and asynchronous parallel and asynchronous serial), and the Bail/Waterfall/Loop type is derived according to the different termination conditions of event execution.

Basic use:

const { SyncHook } = require('tapable');
const hook = new SyncHook(['name']);
hook.tap('hello'.(name) = > {
  console.log(`hello ${name}`);
});
hook.tap('hi'.(name) = > {
  console.log(`hi ${name}`);
});

hook.call('july');

// hello july
// hi july
Copy the code

Summary:

The basic logic of tapable is to register the handler function corresponding to the hook through the tap method of the class instance, and then trigger the callback function through the call method.

compiler

The Compiler object contains all configuration information about the WebPack environment, including options, loaders, and plugins. Can be understood simply as webpack instances. Represents the entire WebPack startup to shutdown lifecycle.

Compile internal implementation:

class Compiler extends Tapable {
  constructor(context) {
    super(a);this.hooks = {
      / * *@type {SyncBailHook<Compilation>} * /
      shouldEmit: new SyncBailHook(["compilation"]),
      / * *@type {AsyncSeriesHook<Stats>} * /
      done: new AsyncSeriesHook(["stats"]),
      / * *@type {AsyncSeriesHook<>} * /
      additionalPass: new AsyncSeriesHook([]),
      / * *@type {AsyncSeriesHook<Compiler>} * /. }; . }Copy the code

Summary:

Compile inherits tapable and binds a hook object to the instance.

compilation

The Compilation object contains the current module resources, compiled generated resources, and changed files. Represents only a new compilation.

Implementation of Compilation:

class Compilation extends Tapable {
  /**
   * Creates an instance of Compilation.
   * @param {Compiler} compiler the compiler which created the compilation
   */
  constructor(compiler) {
    super(a);this.hooks = {
      / * *@type {SyncHook<Module>} * /
      buildModule: new SyncHook(["module"]),
      / * *@type {SyncHook<Module>} * /
      rebuildModule: new SyncHook(["module"]),
      / * *@type {SyncHook<Module, Error>} * /
      failedModule: new SyncHook(["module"."error"]),
      / * *@type {SyncHook<Module>} * /
      succeedModule: new SyncHook(["module"]),
      / * *@type {SyncHook<Dependency, string>} * /
      addEntry: new SyncHook(["entry"."name"]),
      / * *@type {SyncHook<Dependency, string, Error>} * /}; }}Copy the code

When running the WebPack development environment middleware, every time a file change is detected, a new Compilation is created to generate a new set of compilation resources. A Compilation object represents current module resources, compiled generated resources, changed files, and tracked dependencies. The Compilation object also provides a number of time-critical callbacks that plug-ins can choose to use when doing custom processing.

Warm up

Write a basic plugin:

// A JavaScript named function.
function SimplePlugin() {}

// Define a 'apply' method on the prototype of the plug-in function.
SimplePlugin.prototype.apply = function (compiler) {
  // Specify an event hook to mount to webPack itself.
  compiler.plugin("webpacksEventHook".function (
    compilation /* Handle webPack internal instance specific data. * /,
    callback
  ) {
    console.log("This is an simple plugin!!!");

    // When the functionality is complete, call the callback provided by WebPack.
    callback();
  });
};
Copy the code

After WebPack started, it did the following:

• Execute first during the read configuration processnew SimplePlugin(), initialize a SimplePlugin and get an example.
• In the initializationcompilerObject, and then callSimplePlugin.apply(compiler)For the plug-in instancecompilerObject.
• The plug-in instance is obtained atcompilerObject, you can passcompiler.plugin("webpacksEventHook", function(compilation, callback){})Listen to webPack broadcast events and passcompilerObject to manipulate WebPack.

In actual combat

Let’s write a useful plug-in.

To do something when WebPack closes right away. For example, it tells you whether the package is completed or not. Or execute some script. We’ll call it AfterWebpackPlugin. The usage is as follows:

module.exports = {
  plugins: [
    // Pass the success and failure callbacks, respectively
    new AfterWebpackPlugin(
      () = > {
        // You can notify the user of a successful build and execute the release script
      },
      (err) = > {
        // Throw an exception when the build fails
        console.error(err); })]};Copy the code

The implementation here requires the following two hooks:

• Done: Occurs when WebPack exits immediately after a successful build and output of the file.
• Failed: Occurs when the build failed due to a build exception and WebPack exits immediately.

The implementation code is as follows:

class AfterWebpackPlugin {
  constructor(doneCb, failedCb) {
    // Pass the callback function
    this.doneCb = doneCb;
    this.failedCb = failedCb;
  }

  apply(compiler) {
    compiler.plugin("done".(res) = > {
      // Callback in webPack lifecycle 'done'
      this.doneCb(res);
    });
    compiler.plugin("failed".(err) = > {
      // Callback in webPack lifecycle 'failed'
      this.failedCb(err); }); }}module.exports = AfterWebpackPlugin;
Copy the code

Summary of plug-in development:

• Notice in the WebPack lifecycle to find the appropriate hooks to complete the functionality.
• Take care to understand the nuances of the various hooks in the WebPack lifecycle.

expand

Events that occur during the Output phase of WebPack and are explained below:

series

• Webpack Core Features loader
• “Webpack Core Features” plugin
• “Webpack Core Features” Module Hot Replacement (HMR)

Thank you

• If this article helped you, just give it a like! Thanks for reading.
• I participated in the 2020 List of creators. If you like me, you can vote for me