面试官：了解webpack插件？写过webpack插件吗？

站长

2023年07月28日 13:54 · 阅读数 15

前言

面试官: 了解webpack插件吗？

我：有了解过一点

面试官: 那你说说你了解的webpack插件

我：就是一个类，然后有一个apply函数作为入口函数，接受一个compiler参数，然后就在这个插件内完成具体的功能

面试官: 写过webpack插件吗？

我：嗯...，这个..., 没有😅

面试官：em...

是不是很熟悉的场景，因为有时候我们确实没机会去对项目进行webpack配置或者去优化webpack配置，所以就谈不上对webpack plugin、loader、整体流程有了解，那么在面试的时候当面试官一问到webpack相关问题的时候，可能就答不上来了

那么面试官为什么想要问webpack相关的问题？无外乎

webpack几乎是目前前端项目构建的标配，所以webpack的掌握程度与工程化息息相关
webpack提供了很多特性和功能，例如多入口、chunk提取、懒加载等，这些功能可以显著提升前端项目的性能。因此掌握webpack的各种功能能够让开发者更好地构建出高效、健壮的前端应用
webpack够难，有一定的门槛

所以在面试中，会涉及到webpack的基础概念、配置、原理、性能优化等方面的问题，需要面试者有一定的实践经验和理论知识。同时，面试官也会通过对webpack相关问题的考察，来评估面试者的技术深度和解决问题的能力。

那么本篇就是帮助面试者，攻克webpack plugin相关的问题，帮助面试者对webpack plugin有一个更好的认识，不仅能够帮助我们面试，更能够帮助我们在日常的开发中更好的使用webpack

看完本篇之后，希望小伙伴面试的时候是这样回答的

面试官：了解webpack插件吗？

你会这么回答

了解，webpack的大致流程是，初始化配置 => 从入口模块开始解析 => 经过loader处理 => 遍历ast => 找到依赖 => 继续解析依赖，直到所有的子模块都解析完成 => 优化chunk => 生成assets => 根据assets生成最终的产物

而这个过程中webpack不能满足所有的场景，为了webpack更加灵活与拓展，设计了插件机制，webpack的插件机制，基于tapable实现，而tapable提供了多种类型的hook，比如同步串行hook，异步并行hook等

然后webpack目前提供的hook大概有5类，第一类是compiler上的hook，这类hook是大流程上的节点；第二类complation上的hook，这类hook是构建模块实例、优化chunk等流程上的节点；第三类NormalModuleFactory上的hook，这类hook是模块创建、超找模块等流程上节点；第四类是JavascriptParser上的hook，这类hook就是遍历ast流程上的节点；第五类就是ContextModuleFactory上的hook与NormalModuleFactory上的hook类似，但是用的少

最后一个插件以apply方法作为入口函数，入口函数会接受一个compiler参数，接下来就是根据webpack在compiler，compilation等对象上爆料的hooks上注册callback，在callback内完成拓展功能

面试官：写过webpack插件吗？

你会这么回答

写过，我写过约定式路由插件(任何自己写的插件)，写这个插件的目的是为了解决手写routes配置文件，做到自动生成routes文件，以高开发效率

为了使生成routes文件生效，我选择在webpack编译之前的hooks内完成routes文件的生成，而编译之前的hooks有，environment、initialize等hook，我这里选择initialize hook，这一个同步串行hook

最后在initialize hook上注册callback，在callback内读取目录及相关的配置，生成路由配置文件

下面开始正文，在这篇文章中，我们将探讨如何编写webpack插件。webpack是一个非常流行的JavaScript模块打包工具，使用它可以将多个JavaScript模块打包成一个或多个bundle文件。webpack有很多功能和特点，其中一项非常重要的特点就是其可扩展性，通过编写webpack插件可以实现各种自定义功能。插件就是webpack的基石。所以掌握webpack插件，能过让我们成为一个更熟练的webpack配置工程师，同时也能解决面试中碰到的webpack plugin问题

本文将从以下几个方面介绍webpack插件：

webpack插件是什么？帮助我们了解webpack为什么设计插件机制
项目内如何使用插件？帮助我们快速搭建项目的webpack配置
常用webpack插件及原理？帮助我们了解常用的webpack插件内部是怎么写的，哪些值得我们借鉴
编写自己的webpack插件？根据我们的业务场景，编写一些提升开发效率的插件

插件是什么

为什么设计插件机制

webpack的设计理念是万物皆模块，然后将所有模块打包成一个或者多个bundle文件，但是这并不意味着webpack自身就能满足所有功能，比如chunk提取、代码压缩、css文件提取等等，所以为了使webpack更加了灵活与便于拓展，webpack设计了插件机制，通过插件可以实现各种拓展功能，满足业务需求

怎么定义插件

webpack规定插件必须是一个javascript对象，且对象上必须有一个apply方法，这个apply方法会在webpack进行编译的时候进行调用，插件定义如下所示

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply() {}
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

到这里我们已经已经知道怎么定义一个webpack plugin，虽然这个插件能过被执行，但是不会有任何作用，原因是插件内没有做任何处理，那么插件内怎么去介入webpack的构建流程，影响最终的构建结果呢？其实webpack在执行插件apply方法的时候，会传入一个compiler对象，这个compiler对象上会暴露webpack构建阶段不同节点的hook，然后在这个hook上允许注册对应的callback，如下所示

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    // compiler.hooks 包含一组节点，这些节点，都允许注册对应的callback,webpack执行过程中，会调用这个callback，然后在这个callback
    // 调用的时候传入一些参数，然后callback内借助传入的参数修改webpack构建过程中的一些内容，最终影响webpack的构建结果
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('The webpack build process is starting!');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

webpack构建流程可以简单总结如下图所示面试官：了解webpack插件？写过webpack插件吗？

那么webpack只要在处理的过程中，在各个阶段，执行我们注册的callback，那么我们的插件就可以介入webpack构建流程，我们从webpack源码看下，webpack是怎么触发我们注册的hook callback执行的

const {
	SyncHook,
	SyncBailHook,
	AsyncParallelHook,
	AsyncSeriesHook
} = require("tapable");

this.hooks = Object.freeze({
  /** @type {SyncHook<[]>} */
  initialize: new SyncHook([]),
  /** @type {SyncHook<[CompilationParams]>} */
  compile: new SyncHook(["params"]),
  /** @type {AsyncParallelHook<[Compilation]>} */
  make: new AsyncParallelHook(["compilation"]),
  ...
});


compile(callback) {
  const params = this.newCompilationParams();
  // 调用beforeCompile hook，传入参数params, callback
  this.hooks.beforeCompile.callAsync(params, err => {
    if (err) return callback(err);

    // 调用compile hook，传入参数params
    this.hooks.compile.call(params);

    const compilation = this.newCompilation(params);

    // 调用compile hook 传入参数compilation, callback
    this.hooks.make.callAsync(compilation, err => {
      if (err) return callback(err);

      // 调用finishMake hook 传入参数compilation, callback
      this.hooks.finishMake.callAsync(compilation, err => {
        if (err) return callback(err);

        process.nextTick(() => {
          compilation.finish(err => {
            if (err) return callback(err);
            
            compilation.seal(err => {
              if (err) return callback(err);

              // 调用afterCompile hook 传入参数compilation, callback
              this.hooks.afterCompile.callAsync(compilation, err => {
                if (err) return callback(err);
                return callback(null, compilation);
              });
            });
          });
        });
      });
    });
  });
}

从源码我们可以看到，webpack在编译的过程中，会在各个节点调用对应的hook，从而执行对应的callback，以达到功能拓展的目的

目前webpack暴露的hook有5类

compiler类hook
- run
- compiler
- compilation
- shouldEmit
- emit
- done
compilation类hook
- buildModule
- succeedModule
- finishModules
- normalModuleLoader
ContextModuleFactory类hook
- beforeResolve
- afterResolve
- createModule
- module
NormalModuleFactory类hook
- beforeResolve
- afterResolve
- createModule
- module
JavascriptParser类hook
- import
- call

更多hook直接查看文档即可compiler hooks

我们只需要每个hook代表执行的哪个阶段，并且该hook属于哪种类型的hook即可在插件中通过该hook注册callback，完成对应的逻辑，如所示我想在编译模块之前做些事情面试官：了解webpack插件？写过webpack插件吗？

compiler.hooks.beforeRun.tapAsync('MyPlugin', (compiler, callback) => {
  /* 处理逻辑 */
	callback()
});

比如我想在模块解析之前做些事情面试官：了解webpack插件？写过webpack插件吗？

compiler.hooks.compilation.tap('MyPlugin', (compilation, compilationParams) => {
   compilation.hooks.finishModules.tapAsync(
      'SourceMapDevToolModuleOptionsPlugin',
      (modules, callback) => {
        // modules 就是包含所有module处理完之后的module实例
        callback()
      }
    );
});

比如我想在所有模块处理之后做一些事情面试官：了解webpack插件？写过webpack插件吗？

compiler.hooks.compilation.tap('MyPlugin', (compilation, compilationParams) => {
   compilation.hooks.finishModules.tapAsync(
      'SourceMapDevToolModuleOptionsPlugin',
      (modules, callback) => {

        NormalModuleFactory.hooks.someHook.tap(/* ... */)
      }
    );
});

到这里我们基本上知道，应该怎么去注册callback了，但是我们仔细看的话，hook的类型有很多种，比如

Synchook：同步串行钩子
AsyncSerieshook: 异步串行钩子
AsyncParallelhook：异步并发钩子
SyncBailhook：同步熔断钩子，也就是当有一个返回非undefined的值时，会中断后续callback的执行

那为什么会有这么多种类型，不要这种类型行不行，比如我们注册callback，将这些注册的callback放到一个数组里，然后执行数组内所有的callback不行吗？伪代码如下所示

compiler.hooks.compilation.tap('MyPlugin', callback1)

compiler.hooks.compilation.tap('MyPlugin', callback2)

compiler.hooks.compilation.tap('MyPlugin', callback2)

// 用数组来介绍callback
handles = [callback1, callback2, callback2]

// 然后到执行节点的时候，按照注册顺序执行callback
handles.forEach((handle) => {
  handle(params)
})

这种简单的发布订阅方式实现的插件机制不行吗？不是不行，而是webpack场景更复杂，单纯的通过注册顺序执行无法满足所有需求，所以才设计了更多的插件执行模式

比如callback串行执行
比如callback并行执行
比如callback串行执行，将前一个的结果，传给后一个
比如callback串行执行，只要有一个返回不是undefined的值，就立马返回，中断后面的callback执行等等

webpack把这一套插件机制封装成了一个单独的npm包tapable，tapable提供的hook如下所示

SyncHook 同步钩子
SyncBailHook 同步熔断钩子
SyncWaterfallHook 同步流水钩子
SyncLoopHook 同步循环钩子
AsyncParalleHook 异步并发钩子
AsyncParalleBailHook 异步并发熔断钩子
AsyncSeriesHook 异步串行钩子
AsyncSeriesBailHook 异步串行熔断钩子
AysncSeriesWaterfallHook 异步串行流水钩子

从功能对Hook分类

Type	Function
Waterfall	同步方法，传值下一个函数
Bail	当函数有任何返回值，则在当前执行函数停止
Loop	监听函数返回true则继续循环，返回undefined表示循环结束
Series	串行钩子
Paralle	并行钩子

从类型对Hook分类

Async*	Sync*
绑定: tapAsync/tapPromise/tap	绑定：tap
执行: callAsync/promise	执行：call

tapable的实现原理也相当有意思，使用的是字符串拼接 + new Function的方式生成函数体，感兴趣的可以自己通过vscode断点调试的方式去看看源码

所以到这里我们可以知道，写一个webpack插件，需要

插件是一个javascript对象，且该对象必须包含入口apply方法
webpack暴露了5类hook，我们必须要知道我们要介入的节点是哪个hook
注册callback的方式，有同步与异步的方式，一定要根据文档的提示hook类型来决定

项目内如何使用插件

上面我们已经知道插件应该怎么定义，那么这一节，我们将会学习怎么在项目内使用插件，本文的案例都是围绕webpack5来讲的

假设我们写的插件如下所示使用类定义我们的插件

class MyPlugin {
  constructor(opts) {
    this.options = opts
  }
  apply(compiler) {
    compiler.hooks.compilation.tap('MyPlugin', (compilation, compilationParams) => {
       compilation.hooks.finishModules.tapAsync(
          'MyPlugin',
          (modules, callback) => {
          	for (let item of [...modules]) {
              //	 打印每个module的路径
              console.log('item', item.resource);
            }
            callback()
          }
        );
    });
  }
}

使用function定义我们的插件

function MyPlugin2(opts) {
  this.options = opts
}

MyPlugin2.prototype.apply = function(compiler) {
  compiler.hooks.compilation.tap('MyPlugin', (compilation, compilationParams) => {
    compilation.hooks.finishModules.tapAsync(
       'MyPlugin',
       (modules, callback) => {
         for (let item of [...modules]) {
           // 打印每个module的路径
           console.log('item 2', item.resource);
         }
         callback()
       }
     );
 });
}

一份简单的webpack配置

const path = require('path');
const { ProgressPlugin } = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const Myplugin = require('./myPlugin')


const config = {
  mode: 'production',
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'js/[name].[chunkhash].js',
    chunkFilename: 'chunk/[name].[chunkhash].js',
    publicPath: './'
  },
  plugins: [
    // 使用我们自己的插件
    new Myplugin({
      test: 1
    }),
    // 使用我们自己的插件
    new Myplugin2({
      test: 2
    }),
    // 使用webpack提供的插件
    new ProgressPlugin(
      {
        percentBy: 'entries',
      }
    ),
    // 使用社区提供的插件
    new HtmlWebpackPlugin(
      {
        filename: 'index.html',
        template: path.join(__dirname, '../public/index.html'),
      }
    ),
  ],
  entry: {
    app: path.join(__dirname, '../src/app')
  },
}

module.exports = config

所以其实插件使用只要注意两点

插件本身要是javascript对象，且包含apply方法
插件通过webpack的plugins字段传入

常用插件

以react项目为例，我们一个项目可能会包含哪些插件，这些插件分别是怎么实现功能的，我们通过对这些常用插件的了解，进一步掌握webpack插件原理

基础插件

对插件原理的阅读可能需要一定的webpack基础，可选择跳过原理部分

html-webpack-plugin@5.5.1 html处理插件

使用