经过前两章节的学习，对于webpack的基础和高阶部分有所掌握了，下面总结了几道常见的 webpack 面试。希望对你们对于 webpack 的学习有所收获！！

webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

Loader 本质就是一个函数，在该函数对接收到的内容进行转换，返回转换后的结果。你可以理解为是一个“管道”，在外部接收到的内容通过这个“管道”进行转换，然后再将转换后的结果输出。因为 webpack 只认识 js，所以，你也可以将 Loader 称之为“翻译官”，对其他类型的资源进行转译的预处理工作。

Plugin 直译为插件，基于事件流框架 Tapable。Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。在 Webpack 运行的生命周期中会广播出许多事件，Plugin可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。 干货来了！！！（通过这个 Tapable 框架，你可以更深层的谈一下 webpack 底层 plugin 是如何实现的以及微内核，其实 webpack 就是微内核架构的一个例子，本质上就是一个是很小的功能，它并没有携带任何业务的功能，比如：打包多个页面，在打包页面上做相应的操作，其实它都没有，形象的来说它更像是一个底座，这底座可以插上各个地方增添的功能）

扩展：

微内核系统一般分为两部分 ---核心系统和插件系统，这样就提供了很好的灵活性和可扩展性。核心系统是最小可运行的模块，它提供的是通用逻辑（比如 Tapable），而插件系统这些是具体的逻辑（比如HtmlWebpackPlugin插件），再比如系统怎么跑起来，插件之间怎么通信等模块都属于核心系统里面，让系统更加丰富多彩就是插件系统了。插件之间可以相互独立，也可以有依赖。 核心系统怎么知道哪些插件可用呢？ 这就需要注册表了，其实我们的 webpack.config.js 就起到了这样的作用，它告诉我们需要使用哪些插件。 插件系统和核心系统怎么通信呢？ 这就需要用到 Tapable 了，里面有各种 hooks，并且在运行各个生命周期过程中会执行对应的回调。我们的核心系统有生命周期的概念，插件里面也有，因为它们的架构是类似的。我们的核心系统在运行后会先读取注册表信息，这个过程其实就是订阅事件，主车回调的过程。插件可以在运行回调的过程中再不断订阅自己需要的其他事件，注册其他回调。服务于具体逻辑的插件模块是独立于核心系统之外的，但是它可能会需要操作核心模块的系统服务来实现这些规定的功能，此时核心系统需要提供一个上下文对象（context），当然，插件模块与外部进行交互只允许通过此上下文对象完成。上下文对象提供了基础操作（调起其他插件模块、调起系统服务，获取系统信息）的 API 和事件。 这样待核心系统的生命周期顺序执行的过程，也就伴随这对应的时期的插件的生命周期交替执行，生命周期走完了，整个程序流程也就结束了。

webpack 的热更新又称为热替换（Hot Module Replacement），缩写为 HMR，这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。

HMR 的核心就是客户端从服务端拉取更新后的文件，准确的说是 chunk diff（chunk需要更新的部分），实际上 webpack-dev-server 与浏览器之间维护了一个 WebSocket，当本地资源发生变化时，webpack-dev-server会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 webpack-dev-server 发起 ajax 请求来获取更改内容（文件列表、hash），这样客户端就可以再借助这些信息继续向 webpack-dev-server 发起 jsonp 请求获取该 chunk 的增量更新。后续的部分由 HotModulePlugin 来完成，提供了相关的 API 以供开发真针对自身场景进行处理，像 react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。 详细的HRM原理解析

source map 是将编译、打包、压缩后的代码映射会源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要 source map。 map 文件只要不打开开发者工具，浏览器是不会加载的。 显示环境一般有三种处理方案：

文件指纹是指打包后输出文件的名的后缀。

webpack中，tree-shaking 的实现 一是先标记出模块导出值中哪些没有被动用过，二是 Terser 使用删除掉这些没被用到的导出语句。

标记过程大致可划分为三个步骤：

Make 阶段：收集模块导出变量并记录到模块依赖关系图 ModuleGraph 变量中。

Seal 阶段：遍历 ModuleGraph 标记模块导出变量有没有被使用

生成产物时：若变量没有被其他模块使用则删除对应的导出语句。 Webpack 中 Tree Shaking 的实现分为如下步骤：

在 FlagDependencyExportsPlugin 插件中根据模块的 dependencies 列表收集模块导出值，并记录到 ModuleGraph 体系的 exportsInfo 中

在 FlagDependencyUsagePlugin 插件中收集模块的导出值的使用情况，并记录到 exportInfo._usedInRuntime 集合中

在 HarmonyExportXXXDependency.Template.apply 方法中根据导出值的使用情况生成不同的导出语句

使用 DCE 工具删除 Dead Code，实现完整的树摇效果 详细tree-shaking原理请参考这里

大多数JavaScript Parser遵循 estree 规范，Babel 最初基于 acorn 项目(轻量级现代 JavaScript 解析器) Babel大概分为三大部分：

解析：将代码转换成 AST

转换：访问 AST 的节点进行变换操作生产新的 AST

生成：以新的 AST 为基础生成代码 详细参考 深入理解babel

没有。但是我知道其开发的基本思路：因为 loader 支持链式调用，所以开发上需要严格遵循“单一职责”，每个 loader 只负责自己需要负责的事情。loader 拿到的是源文件的内容（content），通过this.getOptions() 拿到传入的参数，可以通过返回值的方式将处理后的内容输出或者通过 this.callback() 同步方式将内容返回出去，也可以调用 this.async() 生成一个异步的函数， callback 来处理传入的内容，再通过调用 cabllback（）将处理后的内容返回出去。开发的过程中尽量使用异步 loader。使用 schema-utils 来检验的我们的参数。然后再利用第三方提供的模块进行 loader 的开发。

没有。但是我知道其开发的基本思路： webpack 在运行生命周期中会广播出许多事件，PLugin 可以监听这些事件，在特定的阶段写入想要添加的自定义功能。webpack 的 tapable 事件流机制保证了插件的有序性，使得整个系统扩展性良好。 通过 consturctor 获取传入的配置参数，apply() 方法得到 compiler，compiler 暴露了和 webpack 整个生命周期相关的钩子，通过 conpiler.hooks.thiscompilation 初始 compilation。compilation 暴露了与模块和依赖有关的粒度更小的事件钩子，再使用相关的 hooks 对资源进行添加或者修改。emit 事件发生时，可以读取到最终输出的资源、代码块、模块及其依赖，并进行修改（emit 事件是修改 webpack 输出资源的最后时机）。 异步的事件需要再插件处理完任务时调用回调函数通知 webpack 进入下一个流程，不然会卡住。