Webpack常见面试题

1. Webpack打包的流程？

   Webpack的打包流程其实对应了webpack的配置，主要的流程包括以下几个步骤：

   1. 入口

      Webpack初始化打包环境，根据入口配置，获取到打包的入口文件

   2. 模块分析

      模块分析建立依赖图谱

   3. loader处理

      加载loader对不同的模块进行编译和转换

   4. 插件处理

      加载plugin，在不同的阶段进行对应的插件处理工作

   5. 输出

      将最终的产物输出成一个js文件

2. webpack的loader和plugin的区别？

   1. 工作任务不同：

      1. webpack的loader主要用于不同模块的处理，webpack只能处理js却不能处理其他文件，所以需要不同的loader来对依赖图谱中的其他类型的模块进行解析和转换和生成
      2. webpack的plugin则不一样，它主要在webpack打包的不同阶段，依赖事件驱动的webpack打包钩子函数进行一些打包优化等工作

   2. 生命周期不一样

      1. loader主要工作webpack的编译阶段和构建阶段
      2. plugin可以工作在webpack打包的整个生命周期

3. webpack打包的阶段和常用的钩子函数

   1. 初始化： 初始化打包环境

      1. environment钩子：初始化打包环境以后调用
      2. afterEnvironment钩子：打包环境初始化完成以后调用

   2. 编译阶段：将模块解析成抽象语法树（AST），构建依赖关系，并对不同的模块进行转换和处理

      1. EntryOption：解析配置文件的入口点
      2. afterPlugins：插件加载完成后调用
      3. afterResolver：Resolver加载完成以后执行
      4. beforeRun：编译开始前调用
      5. Run：开始编译
      6. AfterRun：编译结束后调用

   3. 构建阶段：生成输出文件的阶段，包括生成资源和输出文件的处理

      1. beforeCompile：开始编译模块
      2. compile
      3. afterCompile
      4. shouldEmit
      5. emit
      6. afterEmit

   4. 完成阶段：打包完成以后的阶段

      1. done：打包完成时调用
      2. failed：打包失败时调用
      3. invalid：监听模式下，打包无效后执行
      4. watchClose：监听模式关闭以后执行

   ‍

‍

‍

‍