如何为webpack serve启动脚本添加debugger进行调试

webpack 本身是运行在 Node.js 进程上的工具，你之前熟悉的 node --inspect 调试逻辑完全可以复用，只需要把调试参数传递给执行 webpack 的 Node 进程即可，你搜到的 webpack --debug 是 Webpack 4 之前的废弃参数，无需参考。

方案1：直接修改启动脚本（兼容性最好，无需额外依赖） #

直接在 webpack 命令前补全 Node 调用路径，加上 inspect 参数即可，修改后的 package.json 脚本如下：

"scripts": {
  "start": "node --inspect node_modules/webpack/bin/webpack.js serve --config webpack.config.js"
}

如果需要自定义调试端口，把 --inspect 替换为 --inspect=你要的端口号 即可，比如 --inspect=9230。

方案2：通过 NODE_OPTIONS 环境变量传参（无需修改 webpack 调用路径） #

如果不想写长长的 node_modules 路径，也可以通过 Node 内置的 NODE_OPTIONS 环境变量注入调试参数：

• Mac/Linux 环境写法：

"scripts": {
  "start": "NODE_OPTIONS='--inspect' webpack serve --config webpack.config.js"
}

• Windows 原生 cmd 环境写法：

"scripts": {
  "start": "set NODE_OPTIONS=--inspect && webpack serve --config webpack.config.js"
}

如果需要跨平台兼容，可以安装 cross-env 依赖统一写法：

"scripts": {
  "start": "cross-env NODE_OPTIONS='--inspect' webpack serve --config webpack.config.js"
}

调试使用方式 #

启动脚本后，和普通 Node.js 调试流程完全一致：

• 打开 Chrome 访问 chrome://inspect 即可找到对应调试进程，点击 inspect 进入调试面板加断点调试
• 如果使用 VSCode 调试，可以直接在 .vscode/launch.json 中添加如下配置，F5 一键启动调试：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "调试webpack serve",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "start"],
      "port": 9229
    }
  ]
}

内容的提问来源于stack exchange，提问作者Manny