vscode 調試 webpack 打包

webpack 打包底層是調用 node 的各種接口/能力，所以調試 webpack 其實和調試一個node應用沒什么差別。

恰好最近在改造一個uniapp項目的編譯流程，需要使用一些webapck文檔上沒有的數據。通過debug的方式，我們得以一窺究竟。本文僅記錄如何進入開啟 vscode 調試模式，一來方便以后查找，二來希望能幫到有需要的人。

調試方法不限項目，但文本以uniapp項目為例

vscode Node Debugging

照例先上官網鏈接，詳細參數可前往查看。本文重點關注Attaching to Node.js這個部分。

package.json 改動

package.json 文件的 scripts 中新增 debug 模式：

...
scripts: {
  ...
  "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
  // 新增debug模式
  "debug": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin node --inspect-brk=5858 ./node_modules/@vue/cli-service/bin/vue-cli-service uni-build",
}
...

觀察上面兩行，他們的區別僅是把vue-cli-service改成了node --inspect-brk=5858 ./node_modules/@vue/cli-service/bin/vue-cli-service。

新建 launch.json

同時按下Ctrl+Shift+D，或者鼠標點擊 vscode 編輯器左側運行按鈕（上圖），可創建 launch.json 文件，添加如下內容並保存。

{
  // 使用 IntelliSense 了解相關屬性。 
  // 懸停以查看現有屬性的描述。
  // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "啟動程序",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "debug"],
      "port": 5858
    }
  ]
}

注意：參數要和添加到scripts中的數據保持一致。

開始 debug

打開vue.config.js，在文件任意位置手動添加debugger，或使用鼠標左鍵點擊文件行號的空白位置（會出現紅色小圓點）。同時按下Ctrl+Shift+D，或者鼠標點擊 vscode 編輯器左側運行按鈕后，點擊開始調試，即可進入debug模式。