npm run dev 發(fā)生了什么

以vue cli 3配置為例，
"scripts":{
"dev":"vue-cli-serviceserve",
"serve":"vue-cli-serviceserve",
"build":"vue-cli-servicebuild",
"lint":"vue-cli-servicelint"
}
當(dāng)執(zhí)行npmrundev后
npm會去package.json里邊的scripts字段里找dev這個命令
如果配置了的話，就會執(zhí)行對應(yīng)的配置vue-cli-serviceserve
vue-cli-service也是一個命令，當(dāng)npm的腳本執(zhí)行的時候就會去執(zhí)行當(dāng)前項(xiàng)目目錄下的node_modules/.bin/vue-cli-service.cmd這個文件(可自行查看源碼)
vue-cli-service.cmd這個文件又會用node執(zhí)行@vue\cli-service\bin\vue-cli-service.js文件(可自行查看源碼)
vue-cli-service.js這個文件里加載著(兩層加載)對應(yīng)的命令處理文件（@vue\cli-service\bin\commands\serve.js文件寫著可執(zhí)行的命令）
然后你就會發(fā)現(xiàn)它加載了webpack-dev-server這個包（也就是說vue-cli-service是基于這個包實(shí)現(xiàn)的）(可自行查看源碼)
然后再看webpack-dev-server這個包，它又是基于express實(shí)現(xiàn)的
express又是一個node框架，它起的web服務(wù)器底層調(diào)用的實(shí)際是node的http這個核心模塊
這時就出現(xiàn)一個調(diào)用鏈條npmrundev->vue-cli-serviceserve->webpack-dev-server->express->node->http（vue-cli2的配置少了vue-cli-service這層封裝）
所以得出結(jié)論：vue在npmrundev后為什么就在localhost運(yùn)行了?這個問題的實(shí)質(zhì)是用node調(diào)用http模塊啟用了一個web服務(wù)器。

webpack-dev-server：

webpack-dev-server主要是啟動了一個使用express的Http服務(wù)器。它的作用主要是用來伺服資源文件。此外這個Http服務(wù)器和client使用了websocket通訊協(xié)議，原始文件作出改動后，webpack-dev-server會實(shí)時的編譯，但是最后的編譯的文件并沒有輸出到目標(biāo)文件夾，,實(shí)時編譯后的文件都保存到了內(nèi)存當(dāng)中。因此很多同學(xué)使用webpack-dev-server進(jìn)行開發(fā)的時候都看不到編譯后的文件

轉(zhuǎn)載：https://www.imooc.com/wenda/detail/594797
https://segmentfault.com/a/1190000006670084