Vue Cli的配置中configureWebpack和chainWebpack的主要作用及区别是什么？

直接区别：

configureWebpack项直接覆盖同名配置；chainWebpack项直接修改默认配置。

configureWebpack配置：

// vue.config.js
module.exports = {configureWebpack: {plugins: [new MyAwesomeWebpackPlugin()]}
}

该代码段中的对象将会被webpack-merge合并入最终的Webpack配置中。
如果需要基于环境有条件地配置，或者想要直接修改配置，可以将configureWebpack配置成一个函数方法。代码如下：

// vue.config.js
module.exports = {configureWebpack: config => {if(process.env.NODE_ENV === 'production') {// 为生产环境进行配置} else {// 为开发环境进行配置}}
}

采用configureWebpack的方式会直接覆盖同名的配置，如果只想修改某个配置的某一个子项，例如loader或plugin的选项，则很可能会覆盖掉不想要覆盖的默认配置，除非把这些默认配置再写一遍。

chainWebpack配置：

// vue.config.js
module.exports = {chainWebpack: config => {config.module.rule('vue').use('vue-loader').tap(options => {// 修改选项return options})// 替换一个规则的loaderconst svgRule = config.module.rule('svg')svgRule.uses.clear() // 清除已有的所有loader// 添加要替换的loadersvgRule.use('use-svg-loader').loader('use-svg-loader')}
}

chainWebpack项是一个函数，会接收一个基于webpack-chain的实例，该配置项提供了一个Webpack原始配置的上层抽象，使得可以定义具名的loader规则和具名的插件，并在后期对它们的选项进行修改。
chainWebpack提供了颗粒度更细的配置修改。

比起直接修改configureWebpack配置，chainWebpack的表达能力更强，也更为安全。
根据自己的场景自己选择。