浅析vue cli脚手架@vue/cli-service源码结合官方文档和源码，准备浅析下vue cli是怎么跑起来的。

前言

结合官方文档和源码，准备浅析下vue cli是怎么跑起来的。

全局安装@vue/cli包

npm install -g @vue/cli
# OR
yarn global add @vue/cli

然后使用vue --version查看当前版本为 4.1.2.

这里主要分析@vue/cli-service包的源码，看vue/cli-service包使用webpack如何打包和webpack的一些基础配置，全局安装的@vue/cli包，以后再更。

首先根据官方文档创建一个项目。

vue create vue-cli-app

创建完成之后，项目中package.json中scripts字段有三个值，分别是 serve,build,lint

我们以build为例，看源码是怎么执行的，here we go！

npm run build

npm run命令传送门, 使用npm run script 命令时，直接会找到node_modules/.bin下面对应的脚本，windows系统对应vue-cli-service.cmd命令，类unix系统是/bin/sh命令。以windows系统为例，

简单理解就是执行了 node vue-cli-service.js,这个js文件在node_modues包中的@vue\cli-service\bin路径下。

开始执行vue-cli-service.js

Service类

Service实例化后，又到vue-cli-service.js中，执行service run方法

Service类中的 run 方法

Service类中的 init 方法

commands下的build, serve, inspect等模块都会执行registerCommand方法，以build模块为例(commands/build/index.js)

config 下的base.js css.js 等webpack配置模块都会执行chainWebpack方法，以base模块为例

service执行完init方法，最后在run方法中调用fn

执行command build模块导出回调函数中的registerCommand时的async函数，最后异步执行build函数

build方法会根据命令行参数，加载不同的模块来处理webpack配置

service中的resolveWebpackConfig方法

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的

继续执行build函数，最后webpack！

vue-cli-service build 命令到此结束

啰嗦了这么多，其实是以build为例，用单线程模式跑了遍vue-cli-service build。从根源上，理解下整个过程发生了什么事情，也便于写Service插件（如有可能）。如果只想看webpack的默认配置源码，只须关注config文件下的几个模块。