（转载）vue项目npm run dev 发生了什么？

npm run dev 发生了什么

以vue cli 3配置为例，
"scripts":{
"dev":"vue-cli-serviceserve",
"serve":"vue-cli-serviceserve",
"build":"vue-cli-servicebuild",
"lint":"vue-cli-servicelint"
}
当执行npmrundev后
npm会去package.json里边的scripts字段里找dev这个命令
如果配置了的话，就会执行对应的配置vue-cli-serviceserve
vue-cli-service也是一个命令，当npm的脚本执行的时候就会去执行当前项目目录下的node_modules/.bin/vue-cli-service.cmd这个文件(可自行查看源码)
vue-cli-service.cmd这个文件又会用node执行@vue\cli-service\bin\vue-cli-service.js文件(可自行查看源码)
vue-cli-service.js这个文件里加载着(两层加载)对应的命令处理文件（@vue\cli-service\bin\commands\serve.js文件写着可执行的命令）
然后你就会发现它加载了webpack-dev-server这个包（也就是说vue-cli-service是基于这个包实现的）(可自行查看源码)
然后再看webpack-dev-server这个包，它又是基于express实现的
express又是一个node框架，它起的web服务器底层调用的实际是node的http这个核心模块
这时就出现一个调用链条npmrundev->vue-cli-serviceserve->webpack-dev-server->express->node->http（vue-cli2的配置少了vue-cli-service这层封装）
所以得出结论：vue在npmrundev后为什么就在localhost运行了?这个问题的实质是用node调用http模块启用了一个web服务器。

webpack-dev-server：

webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

转载：https://www.imooc.com/wenda/detail/594797
https://segmentfault.com/a/1190000006670084