调试 Webpack 源码

准备工作

下载源码

git clone  https://github.com/webpack/webpack.git

因为 webpack 它是不需要 build 的。这一点有点特别。它必须安装 webpack-cli，执行 /bin/webpack.js 其实内部是去到 webpack-cli 然后再到 webpack，所以调试的必须绕过 webpack-cli

新建 .vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        // 指定要调试的源码类型
        "type": "node",
        "request": "launch",
        // 调试代码的名称
        "name": "启动webpack调试程序",
        // 指定要启动代码的入口文件
        // "program": "${workspaceRoot}/node_modules/webpack/bin/webpack.js",
        "program": "${workspaceRoot}/debugger.js",
        // 输出
        "console": "integratedTerminal"
      }
    ]
  }

新建 debugger.js

const webpack = require('webpack/lib/webpack')
const config = require('./webpack.config')

// 执行 webpack 函数有传回调函数
// const compiler = webpack(config, (err, stats) => {
//   if (err) {
//     console.log(err)
//   }
// })
// 执行 webpack 函数没有有传回调函数
const compiler = webpack(config)

// 需要手动调用一下 compiler.run
compiler.run((err, stats) => {
  if (err) {
    console.log(err)
  }
})

通过 npm link 将刚刚下载的的包软链接到调式项目中

npm link // webpack 项目
npm link webpack // 调式项目

使用 vscode 调试即可。

总结

本质上是找到 webpack-main/lib/webpack.js 这个文件调式项目，这样就可以绕过 webpack-cli 执行webpack，所以就需要通过开发者手动找到入口文件，打上断点。