const cdnBaseUrl = 'https://cdn.bootcdn.net'
const cdnConfig = [
  { name: 'vue', scope: 'Vue', js: `${cdnBaseUrl}/ajax/libs/vue/2.6.14/vue.min.js` },
  { name: 'vue-router', scope: 'VueRouter', js: `${cdnBaseUrl}/ajax/libs/vue-router/3.5.3/vue-router.min.js` },
  { name: 'vuex', scope: 'Vuex', js: `${cdnBaseUrl}/ajax/libs/vuex/3.6.2/vuex.min.js` },
  { name: 'element-ui', scope: 'ELEMENT', js: `${cdnBaseUrl}/ajax/libs/element-ui/2.15.6/index.min.js`, css: `${cdnBaseUrl}/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css` }
]
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        'target': 'http://127.0.0.1:5555',
        'ws': true,
        'changeOrigin': true
      }
    }
  },
  chainWebpack(config) {
    if (process.env.NODE_ENV === 'production') {
      // config.externals({
      //   'vue': 'Vue',
      //   'vue-router': 'VueRouter',
      //   'vuex': 'Vuex'
      // })
      config.externals(cdnConfig.reduce((acc, el) => {
        acc[el.name] = el.scope
        return acc
      }, {}))
      config.plugin('html').tap(args => {
        args[0].cdn = {
          js: cdnConfig.map(el => el.js),
          css: cdnConfig.filter(el => el.css).map(el => el.css)
        }
        return args
      })
    }
  }
}