基于vscode实现调试webpack的源码

以前我想学习一个插件的源码都是直接进入到文件内去看，对于小插件来说没什么问题，但对于像webpack这种巨物就非常困难了，多个文件来回切，多个方法来回切，影响效率。后面接触到了vscode的调试，发现直接去打断点/看调用堆栈就能很快知道调用了哪些文件/方法，不用再跟着代码去翻文件。

FIG.00 / COVER BUFFER

前言#

环境配置#

如果想看代码是怎么被调用的，那就得先让代码被跑起来，所以需要先配置好环境。

webpack
webpack-cli
webpack-dev-server

这三个安装完毕后创建配置文件及入口

这些就不多说了，大家都会，实在不行，拿一个现成的项目即可。

配置vscode调试环境#

打开package.json文件里，创建一个scripts

比如：

  "scripts": {
    "debug": "node --inspect-brk=3100 ./node_modules/webpack/bin/webpack.js"
  },

其中 --inspect-brk=[port]是给node调试监听的端口，后面则是入口文件路径，如果你想调试别的插件源码，做相应替换即可。

然后点击IDE左边这个创建launch.json文件

配置launch.json文件

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "runtimeExecutable": "yarn", // 不多说
      "runtimeArgs": ["debug"], // 执行的脚本指令，即之前在package.json文件里写的scripts,如果是npm，别忘了改成["run", "debug"]
      "port": 3100 // node 监听的端口
    }
  ]
}

然后按下F5即可进入调试状态

编辑于 2022-09-07 22:27

基于vscode实现调试webpack的源码

FIG.00 / COVER BUFFER

{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "pwa-node", "request": "launch", "name": "Launch Program", "skipFiles": [ "<node_internals>/**" ], "runtimeExecutable": "yarn", // 不多说 "runtimeArgs": ["debug"], // 执行的脚本指令，即之前在package.json文件里写的scripts,如果是npm，别忘了改成["run", "debug"] "port": 3100 // node 监听的端口 } ] }