Previous articles:

  • Relearn webpack4 principle analysis

  • Relearn webpack4 basics

  • Re-learn webpack4 loader development

  • Relearn webpack4 plugin development

  • Webpack plug-in development second open cache plug-in

  • Relearn webpack4 packaging libraries and components

  • Relearn webpack4 build speed and volume optimization

Install tapable

  • npm install tapable –save

Tapable practical example demonstration

  • Define a Car method and create hooks on internal hooks: synchronous hook accelerate,brake (accelerate accepts one parameter), asynchronous hook calculateRoutes
  • Use the binding and execution methods corresponding to the hooks
  • CalculateRoutes can return a Promise object using tapAsync
const { SyncHook, AsyncSeriesHook } = require('tapable')

class Car {
  constructor() {
    this.hooks = {
      accelerate: new SyncHook(['newspeed']),
      brake: new SyncHook(),
      calculateRoutes: new AsyncSeriesHook(["source"."target"."routesList"])}}}const myCar = new Car()

// Bind the sync hook
myCar.hooks.brake.tap("WarningLampPlugin".() = > console.log('WarningLampPlugin'));

// Bind the sync hook and pass the parameter
myCar.hooks.accelerate.tap("LoggerPlugin".newSpeed= > console.log(`Accelerating to ${newSpeed}`));

// Bind an asynchronous Promise hook
myCar.hooks.calculateRoutes.tapAsync("tapPromise".(source, target, routesList, callback) = > {
  // return a promise
  return new Promise((resolve,reject) = >{
      setTimeout(() = >{
          const msg = `tapPromise to ${source} ${target} ${routesList}`
          callback(msg)
      },1000)})}); myCar.hooks.brake.call();// WarningLampPlugin
myCar.hooks.accelerate.call(10); // Accelerating to 10

// Execute asynchronous hooks
myCar.hooks.calculateRoutes.promise('Async'.'hook'.'demo').then(data= > {
  console.log(data);// tapPromise to Async hook demo
}, err= > {
  console.error(err);
});
Copy the code

Use tapable webpack – the plugin

  • Compiler.js
const {
  SyncHook,
  AsyncSeriesHook
} = require('tapable');

module.exports = class Compiler {
  constructor() {
    this.hooks = {
      accelerate: new SyncHook(['newspeed']),
      brake: new SyncHook(),
      calculateRoutes: new AsyncSeriesHook(["source"."target"."routesList"])}}run(){
    this.accelerate(10)
    this.break()
    this.calculateRoutes('Async'.'hook'.'demo')}accelerate(speed) {
    this.hooks.accelerate.call(speed);
  }
  break() {
    this.hooks.brake.call();
  }
  calculateRoutes() {
    this.hooks.calculateRoutes.promise(... arguments).then(() = >{},err= > {
      console.error(err); }); }}Copy the code
  • my-plugin.js
const Compiler = require('./compiler') class MyPlugin { constructor() {} apply(compiler) { compiler.hooks.brake.tap("WarningLampPlugin", () => console.log('WarningLampPlugin')); compiler.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`)); compiler.hooks.calculateRoutes.tapPromise("calculateRoutes tapPromise", (source, target, routesList, callback) => { return new Promise((resolve,reject)=>{ setTimeout(()=>{ console.log(`tapPromise to ${source} ${target} ${routesList}`) resolve(); }, 1000)})}); } } const myPlugin = new MyPlugin(); const options = { plugins: [myPlugin] } const compiler = new Compiler(); for (const plugin of options.plugins) { if (typeof plugin === "function") { plugin.call(compiler, compiler); } else { plugin.apply(compiler); } } compiler.run()Copy the code

Join us at ❤️

Bytedance Xinfoli team

Nice Leader: Senior technical expert, well-known gold digger columnist, founder of Flutter Chinese community, founder of Flutter Chinese community open source project, well-known developer of Github community, author of dio, FLY, dsBridge and other well-known open source projects

We look forward to your joining us to change our lives with technology!!

Recruitment link: job.toutiao.com/s/JHjRX8B