'./config/dev',
'./config/prod',
'./config/app'
].map(idToPlugin)
if (inlinePlugins) {
plugins = useBuiltIn !== false
? builtInPlugins.concat(inlinePlugins)
: inlinePlugins
} else {
// 加载项目当中使用的插件
const projectPlugins = Object.keys(this.pkg.devDependencies || {})
.concat(Object.keys(this.pkg.dependencies || {}))
.filter(isPlugin)
.map(idToPlugin)
plugins = builtInPlugins.concat(projectPlugins)
}
// Local plugins
if (this.pkg.vuePlugins && this.pkg.vuePlugins.service) {
const files = this.pkg.vuePlugins.service
if (!Array.isArray(files)) {
throw new Error(`Invalid type for option 'vuePlugins.service', expected 'array' but got ${typeof files}.`)
}
plugins = plugins.concat(files.map(file => ({
id: `local:${file}`,
apply: loadModule(file, this.pkgContext)
})))
}
return plugins
}
在这个 resolvePlugins 方法当中，主要完成了对于 @vue/cli-service 内部提供的插件以及项目应用(package.json)当中需要使用的插件的加载，并将对应的插件进行缓存。在其提供的内部插件当中又分为两类：
‘./commands/serve’
‘./commands/build’
‘./commands/inspect’
‘./commands/help’
这一类插件在内部动态注册新的 CLI 命令，开发者即可通过 npm script 的形式去启动对应的 CLI 命令服务。
‘./config/base’
‘./config/css’
‘./config/dev’
‘./config/prod’
‘./config/app’
这一类插件主要是完成 webpack 本地编译构建时的各种相关的配置。@vue/cli-service 将 webpack 的开发构建功能收敛到内部来完成。
插件加载完成，开始调用 service.run 方法，在这个方法内部开始执行所有被加载的插件：
this.plugins.forEach(({ id, apply }) => {
apply(new PluginAPI(id, this), this.projectOptions)
})在每个插件执行的过程中，接收到的第一个参数都是 PluginAPI 的实例，PluginAPI 也是整个 @vue/cli-service 服务当中一个核心的基类：
class PluginAPI {
constructor (id, service) {
this.id = id // 对应这个插件名
this.service = service // 对应 Service 类的实例(单例)
}
...
registerCommand (name, opts, fn) { // 注册自定义 cli 命令
if (typeof opts === 'function') {
fn = opts
opts = null
}
this.service.commands[name] = { fn, opts: opts || {}}
}
chainWebpack (fn) { // 缓存变更的 webpack 配置
this.service.webpackChainFns.push(fn)
}
configureWebpack (fn) { // 缓存变更的 webpack 配置
this.service.webpackRawConfigFns.push(fn)
