vscode debugger webpack loader

用vscode debugger 配置 debugger

.vscode/launch.json 点击此文件 右下角 添加配置 选择 debugger类型

选择 launch via npm 通过npm命令debugger 这样就可以通过npm run serve debugger 到node.js部分了。webpack包括loader、plugin都是node.js。都可以通过npm debugger到。可以分析loader、plugin是否发挥作用，以及是否正确运行。

{
  "configurations": [
    {
      "name": "Launch via NPM",
      "request": "launch",
      "runtimeArgs": [
        "run-script",
        "serve" //启动脚本命令 如果是npm run serve则是serve，如果是dev则写dev
      ],
      "runtimeExecutable": "npm",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "type": "node",
      "console": "integratedTerminal" // console 输出到 集成终端 
    }
  ]
  
}

配置完成后，在需要debugger的位置，可以直接打上vscode断点，也可以直接写js debugger。在运行和调试工具栏点击运行，或者直接用npm启动。如果执行到相应位置，会触发断点。

启动

调试工具栏

例如：找到 WebpackOptionsApply.js 在最后return options;打上断点，可以看到执行到这里。debugger loader是否正确执行，可以使用loader-runner模块的runLoaders方法，webpack5是在normalMoudule.js模块.