看 webpack 源码总结的一点方法论

用到的工具

  1. WebStorm
  • Collapse All 功能
  • Go To Declaration or Usages 功能
  • Back 功能
  • Forward 功能
  • 按两下 Shift 搜索功能名
  • 可获悉快捷键
  1. VSCode
  • Fold All 功能
  • Go To Definition 功能
  • Go Back 功能
  • Go Forward 功能
  • 按 Ctrl+Shift+P 搜索功能名
  • 可获悉快捷键

准备代码

  1. 使用 webpack
  • 创建一个 demo 项目，用来调试 webpack 和 webpack-cli
  • 运行 webpack-cli 将 src/index.js 打包为 dist/main.js
  1. 下载 webpack
  • 从 GitHub 下载 webpack 的源码，切换至 v5.10.1
  • 从 GitHub 下载 webpack-cli 的源码，切换至 webpack-cli@4.2.0
  • 用 IDE 的 3 个窗口分别打开这 3 个项目

如何调试

  1. 思路
  • webpack-cli 默认会执行 node_modules 里的 JS 代码
  • 我们可以篡改 node_modules 里的源码
  • 我们也可以用 npm link 替换 node_modules 里的目录
  1. 步骤
  • 在 webpack 项目根目录里运行 npm link
  • 在 webpack-cli 项目子目录里运行 npm link
  • 在 demo 项目根目录里运行 npm link webpack webpack-cli

开始阅读源代码

  • 一定要带着问题去看源码，不然你会跑偏最终放弃

  • 中间过程遇到新的问题记录下来下此再来看

  • 只看核心代码，比如if块，require块，声明块，直接return的代码都可以不看

  • 流程代码比较冗长的可以把关键步骤记录下来，到后面就可以串起来