webpack plugin development

webpack plugin development

As the most popular packaging tool for the front-end, webpack not only has rich and flexible configuration, but also has strong scalability (loader and plugin mechanism). Now, I mainly introduce the development method of plugin.

plugin configuration

As we know, the way to configure plugin for webpack is very simple:

//webpack.config.js
var HelloWorldPlugin = require('hello-world');

module.exports = {
  //... config settings here ...
  plugins: [new HelloWorldPlugin({ options: true })]
};

 

The webpack configuration maintains a list of plugins. When webpack is packaged, it will instantiate the plugin and pass in parameters to change the behavior of the plugin.

How to write plugin

Give a simple example:

//A JavaScript class.
class MyExampleWebpackPlugin {
  //Define `apply` as its prototype method which is supplied with compiler as its argument
  apply(compiler) {
    //Specify the event hook to attach to
    compiler.hooks.emit.tapAsync(
      'MyExampleWebpackPlugin',
      (compilation, callback) => {
        console.log('This is an example plugin!');
        console.log('Here s the `compilation` object which represents a single build of assets:', compilation);

        //Manipulate the build using the plugin API provided by webpack
        compilation.addModule(/* ... */);

        callback();
      }
    );
  }
}
 

The basic pattern of a webpack plug-in includes several elements: class name, apply method, event hook, compilation processing, hook type and its callback processing.

The apply method is a must, because the apply method of the plugin instance is called when webpack is running.

Compiler can be understood as a global webpack instance. Webpack provides different hooks at different stages of its life cycle, so that we can customize the behavior of webpack packaging.

Compliation is the resources (js, css, html, etc.) to be processed by webpack. We can process the resources according to our needs.

In the above, tapAsync is a kind of hook type. The first parameter is generally the same as the class name of the plug-in. It is mainly used to distinguish different callback behaviors defined on the hook type.

event hook

Many webpack plugin's event hook, such entryOptionas: run, compile, make, emit, , doneand so on. For details, please refer to the official documents , which will not be introduced here. These hooks will be triggered in sequence at different stages of webpack compilation. When developing a plug-in, you only need to select the hooks you need for processing.

hook type

The event mechanism of webpack is based on the tapable library. For the specific usage of tapable, please refer to its README .

Development webpack plugin mainly used hook type is: tap, , tapAsync, tapPromisethe difference between them can be simply understood as:

hook type Features
tap Synchronize
tapAsync Asynchronous, callback writing
tabPromise Asynchronous, promise writing

summary

Webpack plug-in development is actually not difficult. If we usually encounter webpack problems or want to optimize packaging, we can also try to write a small plug-in to solve it. I recently wrote an open source webpack plugin ( webpack-alioss-upload-plugin ). If you find it easy to use, you can give it a star and manually refill it.

Reference