江苏龙网

  1. 主页 > 生活百科 > >

前端面试题-工程化-webpack 编译流程( 三 )

Webpack

webpack2.js
总结?1. 文件作用?webpack.js 文件?webpack 方法

  1. 接收 webpack.config.js 参数 ， 返回 compiler 实例
  2. 初始化参数
  3. 始化 Compiler 对象实例
  4. 加载所有配置的插件
Compiler文件?
  • Compiler 模块是 webpack 的主要引擎
  • constructor 方法： 初始化一些 hooks
  • run 方法
    • 执行插件订阅的一系列 hooks
    • 创建 Compilation 实例并执行实例的 build（onCompiled）方法（开启一次新的编译）
    • onCompiled 回调在确定好输出内容后 ， 根据配置确定输出的路径和文件名 ， 把文件内容写入到文件系统执行 compiler.run 方法的回调 ， 传入 info监听依赖的文件变化 ， 如果依赖的文件变化后会开始一次新的编译
Compilation 文件?build 方法
  1. .根据配置中的 entry 找出入口文件
  2. 从入口文件出发,调用所有配置的 Loader 对模块进行编译
  3. 再找出该模块依赖的模块 ， 再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
  4. 根据入口和模块之间的依赖关系 ， 组装成一个个包含多个模块的 Chunk
  5. 再把每个 Chunk 转换成一个单独的文件加入到输出列表
  6. 执行成功后的回调
2. 流程总结?初始化参数：?
  1. 初始化参数：从配置文件和 Shell 语句中读取并合并参数,得出最终的配置对象（命令行优先级高）
开始编译?
  1. 用上一步得到的参数初始化 Compiler 对象
    1. 初始化 options 参数和 hooks （ run: new SyncHook(), //在开始编译之前调用...）
  2. 加载所有配置的插件：
    1. 在配置中找到 plugins 数组
    2. 遍历 plugins 执行每个插件的 apply 方法 ， 并把 compiler 实例传进去（每个插件都有一个 apply 方法）
    3. 执行 compiler.hooks.run.tap等方法注册事件
  3. 执行compiler实例的 run 方法开始执行编译
    1. 整个过程伴随着触发插件的注册个各种钩子函数 this.hooks.done.call()...
    2. 开启一次新的编译 ， 创建一个新的 Compilation 实例
    3. 执行实例的 build 方法 ， 传入完成的回调
编译模块?
  1. 根据配置中的 entry 找出入口文件
    1. 格式化入口文件 ， 变成对象形式
    2. 对入口进行遍历 ， 获取入口文件的绝对路径 ， 添加到文件依赖列表中
  2. loader 转换：从入口文件出发,调用所有配置的 Loader 对模块进行转换 （最终返回 module 对象）
    1. 读取处理文件的内容
    2. 根据规则找到所有的匹配的 loader
    3. 调用所有配置的 Loader 对模块进行转换（从上到下 ， 从右向左）
    4. 获取当前模块模块 id ， 相对于根目录的相对路径
    5. 创建一个 module 对象
    6. const module = {
      id:'./src/entry1.js',


      推荐阅读


上一篇：AI图像大战，其实是版权之争

下一篇：这都2023年了，不会有人还不知道选屏蔽还是非屏蔽网线吧？！