在vscode中調試webpack

前言

接手了公司的新項目，但是由於對整個運作流程不瞭解，想要一步步進行調試加深對項目印象，所以搜索了相關資料，結合自己實際情況進行調試。

---

調試的兩個關鍵文件

package.json

正常的package.json

{
  "name": "my-web",
  "version": "0.0.1",
  "scripts": {
    "dev": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
  },
  "dependencies": {
   	"...":"..."
  },
  "devDependencies": {
    "...":"..."
  }
}

我們一般通過控制檯輸入npm run dev、npm run build、npm run test分別進行開發、打包、測試。

簡單介紹一下命令行

npm 允許在package.json文件裏面，使用scripts字段定義腳本命令。

npm run build

等同於執行

node build.js

例子中的node scripts/build.js的scripts/指的是腳本路徑。
如果你想要了解更多，可以看看npm scripts 使用指南。

---

修改後的package.json

如果我們需要調試，則需要修改相關命令scripts中的相關命令。
現在我想要調試start.js，那麼應該修改爲：

    "scripts": {
  	"dev": "node --inspect-brk=5000 ./scripts/start.js scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
  },

調試的模塊：
node: 運行的載體，指nodejs的可執行程序，腳本實際運行的容器。
-inspect-brk=5000：調試映射的端口。5000是端口號，可以修改，但要與VSCode lanch.json的port保持一致。
./scripts/start.js : 解析命令行文件所在的相對路徑
scripts/start.js : 實際要執行的配置文件的路徑
由於start.js文件包含了兩個部分，第一是命令行解析，第二是執行配置，所以這裏設置的地址相同。

如果你仍然對./scripts/start.js 和scripts/start.js有疑惑，可以繼續往下看這個例子

如果是webpack

假設你的配置：

"scripts": {    
    "build": "webpack --config webpack.config.js"  
}

那麼你就要修改成：

"scripts": {
    "build": "node --inspect-brk=5000 ./node_modules/webpack/bin/webpack --config webpack.config.js"
  }

./node_modules/webpack/bin/webpack ：官文文件的相對位置，裏面包含了如何解析命令行的方法。
--config ：命令行的參數
webpack.config.js ：實際被執行的文件，即配置文件

如果是gulp

可以參考這篇文章vscode調試gulp設置。
調試gulp相對簡單點，不需要自己指定調試端口。

---

VSCode lanch.json腳本配置

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

重要參數：
runtimeExecutable: 程序執行器，默認是node，我們用npm腳本啓動，就需要設置成npm

runtimeArgs:傳遞給程序執行器的參數。比如我們是npm run dev，參數就是run和 dev

port: node調試端口號，和剛纔package.json script中配的--inspect-brk保持一致

---

啓動調試

按F5或者點擊 NPM腳本 dev 進行調試

---

參考文章：
npm scripts 使用指南
vscode調試gulp設置
Run a npm script from gulp task
VSCode 調試 webpack