module.exports = {configureWebpack: {plugins: [new MyAwesomeWebpackPlugin()]}
}复制代码

这份配置，最终会被合并到原来的配置里，不会覆盖。

复杂的方法，可以往这个字段传一个函数，如下所示：

module.exports = {configureWebpack: config => {if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...} else {// 为开发环境修改配置...}}
}复制代码

这样就可以在一个函数里做一些简单的逻辑，config是webpack config，你可以直接修改config对象，也可以返回一个对象，这个对象最终也会被合并会webpack对象。

第三种方式，是通过webpack-chain来链式调用，代码如下所示：

module.exports = {chainWebpack: config => {config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {// 修改它的选项...return options})}
}复制代码

3.提供图形化管理界面，最所周知，gui易懂，cli高效，vue在降低学习门槛这方面，已经是非常好了。

通过vue ui指令，可以查看编译各个模块的情况，模块依赖情况，插件的情况，非常便于管理。

4.便捷性。vue-cli-server不仅支持项目的编译，也支持单文件的编译，具体的方法可以看官网介绍。

5.提供了cli的核心能力，也就是问询，模版渲染，文件生成这几大核心功能。具体的示意图可以看如下：

以上是cli2的核心模块，需要引用hbs,inquirer.js,metalsmit等基本模块，cli3的插件机制基本帮我们封装好了，我们只需要根据插件的规范，就可以获取这种能力。

由于有的读者可能对cli2的流程比较陌生，所以我想简单描述一下cli2的工作流程，如下图所示：

首先，cli2提供init指令，执行这个指令，会去远程拿模版文件，并拉到本地用户目录的.vue-template的文件夹，然后通过meta里问题，去问你，然后生成最终模版到你执行命令的目录。

说完vue-cli2，我们来看看vue-cli3的插件是怎么样的？

首先根据插件的位置，我们分成了cli插件，和service插件。cli的插件有完整的开发目录，所能做的事情也比较多一点，service插件是一份js文件，导出一个函数。

cli插件的目录如下所示：

具体的用发可以在官网了解到：

https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#cli-%E6%8F%92%E4%BB%B6

那么他们是怎么工作的呢？

cli的代码主要在@vue/cli 下面，他的大概的流程如下图所示：

@vue/cli/bin/vue.js:

program.command('add <plugin> [pluginOptions]').description('install a plugin and invoke its generator in an already created project').option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)').allowUnknownOption().action((plugin) => {require('../lib/add')(plugin, minimist(process.argv.slice(3)))})program.command('invoke <plugin> [pluginOptions]').description('invoke the generator of a plugin in an already created project').option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)').allowUnknownOption().action((plugin) => {require('../lib/invoke')(plugin, minimist(process.argv.slice(3)))})复制代码

首先，执行vue指令，会执行@vue/cli/bin/vue.js，这里定义了vue add , vue invoke，vue build，vue serve，等指令，可以看出，add指令其实是包含invoke指令的，add指令主要是安装一个包，并且触发generator.js，invoke主要是触发generator.js。

然后再来看@vue/cli/lib/add.js，

  const packageManager = loadOptions().packageManager || (hasProjectYarn(context) ? 'yarn' : 'npm')await installPackage(context, packageManager, options.registry, packageName)复制代码

  const generatorPath = resolveModule(`${packageName}/generator`, context)if (generatorPath) {invoke(pluginName, options, context)} else {log(`Plugin ${packageName} does not have a generator to invoke`)}复制代码

add.js主要安装包，然后执行invoke模块，我们再看看invoke模块做了什么。

@vue/cli/lib/invoke.js

  const generator = new Generator(context, {pkg,plugins: [plugin],files: await readFiles(context),completeCbs: createCompleteCbs,invoking: true})复制代码

invoke里主要实例化generator类，然后把你的插件当成参数传给类，generator类算是vue-cli的核心类了。

@vue/cli/lib/generator.js

  plugins.forEach(({ id, apply, options }) => {const api = new GeneratorAPI(id, this, options, rootOptions)apply(api, options, rootOptions, invoking)})复制代码

这个类主要负责执行你的插件，然后把generatorapi作为参数传入插件的generator.js导出的函数。

具体的vue-cli插件的开发是怎么样的呢，我写了一个demo，用在模拟多项目的ci模版管理，通常每个项目都有一份.gitlab-ci.yml模版，所以我们一般可以抽出一个公共的ci模版来管理，这里我用cli插件来管理，真正的项目可能不具备可行性，这里我只是用来写一个例子。

目录结构大概如上所示，执行vue add foo后，就会出现propmts对话框，然后选择答案后，就会根据配置生成模版到你的根目录下。

_gitlab-ci.yml ,根据问题选择是否用私有npm仓库：

 script:<%_ if (options.config === 'npm') { _%>- nrm add companynpm http://xxx.y.cn:XXXXX/- nrm use companynpm<%_ } _%>复制代码

prompts.js,主要一些问题的设计：

module.exports = [{name: 'config',type: 'list',message: `是否需要切换内部源:`,choices: [{name: '需要',value: 'npm',short: ''},{name: '不需要',value: 'npm',short: ''}]}
]复制代码

generator.js 这个模块很简单，直接渲染模版

module.exports = (api, options, rootOptions) => {// 复制并用 ejs 渲染 `./template` 内所有的文件api.render('./template')
}复制代码

service插件主要放在项目本地，是一份js代码，然后导出一个函数，通过package.json配置指向这个js文件的路径，

service主要依赖的代码在@vue/cli-service里，首先先执行@vue/cli-service/bin/vue-cli-service.js文件，

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd()).....service.run(command, args, rawArgv).catch(err => {error(err)process.exit(1)
})复制代码

该文件实例化Service类，这个类是service插件的核心类，然后再执行run方法。

再来看看@vue/cli-service/lib/Service.js的代码：

首先构造函数执行resolvePlugin，把官方提供的插件和项目里的插件都加载进来，

constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {this.plugins = this.resolvePlugins(plugins, useBuiltIn)
}复制代码

resolvePlugin这个函数主要在这里引入本地的插件：

resolvePlugins (inlinePlugins, useBuiltIn) {// Local pluginsif (this.pkg.vuePlugins && this.pkg.vuePlugins.service) {const files = this.pkg.vuePlugins.serviceif (!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
}复制代码

run方法又会执行init方法，在该方法内部执行插件：

init (mode = process.env.VUE_CLI_MODE) {// apply plugins.this.plugins.forEach(({ id, apply }) => {apply(new PluginAPI(id, this), this.projectOptions)}
}复制代码

那么service插件要如何来实践，我们来看如下的例子：

首先在package.json配置一下，指向本地的插件my-service.js

  "vuePlugins": {"service": ["my-service.js"]}复制代码

my-service.js的代码如下所示：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const webpack = require('webpack');module.exports = (api, projectOptions) => {api.registerCommand('analyze',{description: 'start analyze server',},(args) => {// 注册 `vue-cli-service analyze`let options = projectOptions.pluginOptions.demoOptionsconsole.log(options);// resolve webpack configconst webpackConfig = api.resolveWebpackConfig();webpackConfig.plugins.push(new BundleAnalyzerPlugin());webpack(webpackConfig,(err,stats)=>{if(!err) console.log('打包成功')})},);
};复制代码