configureWebpack和chainWebpack的区别？

Question

百度了一下，说简单的配置用configureWebpack，复杂的用chainWebpack，还是不能理解：
1.什么时候用configureWebpack，什么时候用chainWebpack？
2.为什么要用它，直接在vue.config.js里写不可以吗？vue.config不是集成了webpack吗
3.怎么用他们二者
以下是项目中的二者代码。实在看得云里雾里，请求解释。谢谢！

  configureWebpack: (config) => {
    config.output.library = `${packageName}`
    config.output.libraryTarget = 'umd'
    config.output.jsonpFunction = `webpackJsonp_${packageName}`
    config.externals = {
      // vue: 'Vue',
      axios: 'axios',
      vuex: 'Vuex'
      // 'element-ui': 'ELEMENT'
    }
    config.plugins.push(
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
      })
    )
    // console.log(process.env.NODE_ENV)
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new CompressionPlugin({
          algorithm: 'gzip',
          test: /\.js$|\.css$|\.png$|\.jpg/, // 需要压缩的文件类型
          threshold: 1024, // 对超过1k的数据压缩
          deleteOriginalAssets: false // 不删除源文件
        // minRatio: 0.8 // 压缩比
        })
      )
      // 为生产环境修改配置...
      config.mode = 'production'
      config.optimization.minimizer = [
        new TerserPlugin({
          terserOptions: {
            compress: {
              warnings: false,
              drop_console: true, // console
              drop_debugger: true,
              pure_funcs: ['console.log'] // 移除console
            }
          }
        })
      ]
      // 打包文件大小配置
      config['performance'] = {
        maxEntrypointSize: 1000000000,
        maxAssetSize: 3000000000
      }
    } else {
      // 打包资源图形化显示
      // config.plugins.push(new BundleAnalyzer())
      // 为开发环境修改配置...
      config.mode = 'development'
    }
  },
  chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
    config.module
      .rule('fonts')
      .test(/.(ttf|otf|eot|woff|woff2)$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options = {
          // limit: 10000,
          name: '/static/fonts/[name].[ext]'
        }
        return options
      })
      .end()
    config.entry['whatwg-fetch']
  }