当面试官问Webpack的时候他想知道什么

https://juejin.cn/post/6943468761575849992

前言

在前端工程化日趋复杂的今天，模块打包工具在我们的开发中起到了越来越重要的作用，其中webpack就是最热门的打包工具之一。
说到webpack，可能很多小伙伴会觉得既熟悉又陌生，熟悉是因为几乎在每一个项目中我们都会用上它，又因为webpack复杂的配置和五花八门的功能感到陌生。尤其当我们使用诸如umi.js之类的应用框架还帮我们把webpack配置再封装一层的时候，webpack的本质似乎离我们更加遥远和深不可测了。
当面试官问你是否了解webpack的时候，或许你可以说出一串耳熟能详的webpack loader和plugin的名字，甚至还能说出插件和一系列配置做按需加载和打包优化，那你是否了解他的运行机制以及实现原理呢，那我们今天就一起探索webpack的能力边界，尝试了解webpack的一些实现流程和原理，拒做API工程师。
image.png

你知道webpack的作用是什么吗？

从官网上的描述我们其实不难理解，webpack的作用其实有以下几点：

  • 模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。
  • 编译兼容。在前端的“上古时期”，手写一堆浏览器兼容代码一直是令前端工程师头皮发麻的事情，而在今天这个问题被大大的弱化了，通过webpack的Loader机制，不仅仅可以帮助我们对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。

  • 能力扩展。通过webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量

    说一下模块打包运行原理？

    如果面试官问你Webpack是如何把这些模块合并到一起，并且保证其正常工作的，你是否了解呢？
    首先我们应该简单了解一下webpack的整个打包流程：

  • 1、读取webpack的配置参数；

  • 2、启动webpack，创建Compiler对象并开始解析项目；
  • 3、从入口文件（entry）开始解析，并且找到其导入的依赖模块，递归遍历分析，形成依赖关系树；
  • 4、对不同文件类型的依赖模块文件使用对应的Loader进行编译，最终转为Javascript文件；
  • 5、整个过程中webpack会通过发布订阅模式，向外抛出一些hooks，而webpack的插件即可通过监听这些关键的事件节点，执行插件任务进而达到干预输出结果的目的。

其中文件的解析与构建是一个比较复杂的过程，在webpack源码中主要依赖于compiler和compilation两个核心对象实现。
compiler对象是一个全局单例，他负责把控整个webpack打包的构建流程。 compilation对象是每一次构建的上下文对象，它包含了当次构建所需要的所有信息，每次热更新和重新构建，compiler都会重新生成一个新的compilation对象，负责此次更新的构建过程。
而每个模块间的依赖关系，则依赖于AST语法树。每个模块文件在通过Loader解析完成之后，会通过acorn库生成模块代码的AST语法树，通过语法树就可以分析这个模块是否还有依赖的模块，进而继续循环执行下一个模块的编译解析。
最终Webpack打包出来的bundle文件是一个IIFE的执行函数。

是否写过Loader？简单描述一下编写loader的思路？

从上面的打包代码我们其实可以知道，Webpack最后打包出来的成果是一份Javascript代码，实际上在Webpack内部默认也只能够处理JS模块代码，在打包过程中，会默认把所有遇到的文件都当作 JavaScript代码进行解析，因此当项目存在非JS类型文件时，我们需要先对其进行必要的转换，才能继续执行打包任务，这也是Loader机制存在的意义。
Loader的配置使用我们应该已经非常的熟悉：

  1. // webpack.config.js
  2. module.exports = {
  3.   // ...other config
  4.   module: {
  5.     rules: [
  6.       {
  7.         test: /^your-regExp$/,
  8.         use: [
  9.           {
  10.              loader: 'loader-name-A',
  11.           }, 
  12.           {
  13.              loader: 'loader-name-B',
  14.           }
  15.         ]
  16.       },
  17.     ]
  18.   }
  19. }

通过配置可以看出，针对每个文件类型，loader是支持以数组的形式配置多个的，因此当Webpack在转换该文件类型的时候，会按顺序链式调用每一个loader，前一个loader返回的内容会作为下一个loader的入参。因此loader的开发需要遵循一些规范，比如返回值必须是标准的JS代码字符串，以保证下一个loader能够正常工作，同时在开发上需要严格遵循“单一职责”，只关心loader的输出以及对应的输出。
loader函数中的this上下文由webpack提供，可以通过this对象提供的相关属性，获取当前loader需要的各种信息数据，事实上，这个this指向了一个叫loaderContext的loader-runner特有对象。有兴趣的小伙伴可以自行阅读源码。

  1. module.exports = function(source) {
  2.     const content = doSomeThing2JsString(source);
  4.     // 如果 loader 配置了 options 对象，那么this.query将指向 options
  5.     const options = this.query;
  7.     // 可以用作解析其他模块路径的上下文
  8.     console.log('this.context');
  10.     /*
  11.      * this.callback 参数：
  12.      * error：Error | null，当 loader 出错时向外抛出一个 error
  13.      * content：String | Buffer，经过 loader 编译后需要导出的内容
  14.      * sourceMap：为方便调试生成的编译后内容的 source map
  15.      * ast：本次编译生成的 AST 静态语法树，之后执行的 loader 可以直接使用这个 AST，进而省去重复生成 AST 的过程
  16.      */
  17.     this.callback(null, content);
  18.     // or return content;
  19. }

更详细的开发文档可以直接查看官网的 Loader API。

是否写过Plugin？简单描述一下编写plugin的思路？

如果说Loader负责文件转换，那么Plugin便是负责功能扩展。Loader和Plugin作为Webpack的两个重要组成部分，承担着两部分不同的职责。
上文已经说过，webpack基于发布订阅模式，在运行的生命周期中会广播出许多事件，插件通过监听这些事件，就可以在特定的阶段执行自己的插件任务，从而实现自己想要的功能。
既然基于发布订阅模式，那么知道Webpack到底提供了哪些事件钩子供插件开发者使用是非常重要的，上文提到过compiler和compilation是Webpack两个非常核心的对象，其中compiler暴露了和 Webpack整个生命周期相关的钩子（compiler-hooks），而compilation则暴露了与模块和依赖有关的粒度更小的事件钩子（Compilation Hooks）。
Webpack的事件机制基于webpack自己实现的一套Tapable事件流方案（github）

Plugin的开发和开发Loader一样，需要遵循一些开发上的规范和原则：

  • 插件必须是一个函数或者是一个包含 apply 方法的对象，这样才能访问compiler实例；
  • 传给每个插件的 compiler 和 compilation 对象都是同一个引用，若在一个插件中修改了它们身上的属性，会影响后面的插件;
  • 异步的事件需要在插件处理完任务时调用回调函数通知 Webpack 进入下一个流程，不然会卡住;

了解了以上这些内容，想要开发一个 Webpack Plugin，其实也并不困难。

  1. class MyPlugin {
  2.   apply (compiler) {
  3.     // 找到合适的事件钩子，实现自己的插件功能
  4.     compiler.hooks.emit.tap('MyPlugin', compilation => {
  5.         // compilation: 当前打包构建流程的上下文
  6.         console.log(compilation);
  8.         // do something...
  9.     })
  10.   }
  11. }

更详细的开发文档可以直接查看官网的 Plugin API。

最后

本文也是结合一些优秀的文章和webpack本身的源码，大概地说了几个相对重要的概念和流程，其中的实现细节和设计思路还需要结合源码去阅读和慢慢理解。
Webpack作为一款优秀的打包工具，它改变了传统前端的开发模式，是现代化前端开发的基石。这样一个优秀的开源项目有许多优秀的设计思想和理念可以借鉴，我们自然也不应该仅仅停留在API的使用层面，尝试带着问题阅读源码，理解实现的流程和原理，也能让我们学到更多知识，理解得更加深刻，在项目中才能游刃有余的应用。

作者：希沃ENOW大前端
链接：https://juejin.cn/post/6943468761575849992
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。