浅析npm run serve命令

本地开发一般通过执行 npm run serve 命令来启动项目，那这行命令到底存在什么魔法？我们来一探究竟。

根据这篇文章思路：使用vue-cli初始化后运行npm run server到底干了什么
得知，npm run serve 实际上会执行 vue-cli-service serve（该文件位于 node_modules.binue-cli-service.cmd），查看该文件，发现最终会执行 node vue-cli-service.js serve（该文件位于 [e-mail]）。
vue-cli-service.js就是我们的切入口。
关键代码：

const Service = require('../lib/Service')
//...
const service = new Service(...
//...
service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

根据这篇文章思路：vue-cli系列之vue-cli-service整体架构浅析
实际执行的文件为 serve.js（该文件位于 [e-mail]）
关键代码：

const WebpackDevServer = require('webpack-dev-server')
//...
const webpackConfig = api.resolveWebpackConfig()
//...
const compiler = webpack(webpackConfig)
const server = new WebpackDevServer(compiler, ...
//...
server.listen(port, host, err => {
  if (err) {
    reject(err)
  }
})

可以很清楚的看到，serve.js 中使用了 webpack-dev-server 作为http服务器，启动并监听端口提供服务（不知道webpack-dev-server的话可以暂且将它理解为 nginx）。
这么下来，思路就清晰了，npm run serve 最最终的目的就是启动一个 webpack-dev-server服务器。
webpack-dev-server原生的配置繁多，学习成本不小，既然vue-cli将webpack-dev-server集成到脚手架中，那一定是帮我们做了很多事情。列举几个点：

1. 主页面
   WebpackDevServer构造器第二个入参，historyApiFallback属性 -> genHistoryApiFallbackRewrites，设置了根路径会重定向到 index.html（即为主页面）。

2. 入口文件
   WebpackDevServer构造器第一个入参 -> webpackConfig -> Service.resolveWebpackConfig -> resolveChainableWebpackConfig -> webpackChainFns
   追踪 webpackChainFns 的来源，可以发现 base.js （[e-mail]）会设置 ./src/main.js 为入口文件。

   webpackConfig
   .mode(‘development’)
   .context(api.service.context)
   .entry(‘app’)
   .add(’./src/main.js’)

等等等等…
另外，我们在vue.config.js上的配置或多或少都会映射到webpack-dev-server的配置上。这个当然就要参看vue.config.js的文档啦。

小结

1. 命令依赖链：npm run serve -> node_modules.binue-cli-service.cmd serve -> node [e-mail] serve
2. vue-cli 的开发环境实际上使用了 webpack-dev-server 模块实现。
3. vue.config.js 的配置会作用到 webpack-dev-server 上。

references:
vue-cli-service serve 官方文档
vue.config.js 官方文档
Webpack 官方文档
Webpack DevServer 官方文档
vue-cli系列之vue-cli-service整体架构浅析
使用vue-cli初始化后运行npm run server到底干了什么