我們知道vue-cli 3.0之前直接基於webpack創建對應配置文件，我們通過學習webpack就能夠了解其構建過程，然而從vue-cli 3.0開始，vue-cli命令行更改為@vue/cli以及@vue/cli-service等，他封裝了webpack，使得我們很難清晰了解到底發生了什麽。這時我們可能希望通過調試vue-cli-service對應build過程對其工作原理有一個大體的認知。下面記錄一下這個調試過程:

1. 在git bash命令行中執行：

$ node --inspect-brk node_modules/@vue/cli-service/bin/vue-cli-service.js serve

2. 如果我們直接將上面監測的url ws://xxx/dafa...放到chrome地址欄中去，會報錯:ERR_DISALLOWED_URL_SCHEME,這時我們需要在chrome中執行chrome://inspect ,這裏就能列出來對應可以inspect的session:

如果你不喜歡每次都在chrome中敲chrome:inspect的話，還可以安裝一個NIM (Node Inspector Manager)

3. 點擊inspect後，就直接進入了對應的webpack構建代碼，可以查看其運行過程了。

nodejs調試的原理

https://i5ting.github.io/node-debug-tutorial/#302

通過調試vue-cli 構建代碼學習vue項目構建運行過程