let path = require('path')
const webpack = require('webpack')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const {getThemeColors, modifyVars} = require('./src/utils/themeUtil')
const {resolveCss} = require('./src/utils/theme-color-replacer-extend')
const CompressionWebpackPlugin = require('compression-webpack-plugin')

const productionGzipExtensions = ['js', 'css']
const isProd = process.env.NODE_ENV === 'production'

const assetsCDN = {
    // webpack build externals
    externals: {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        vuex: 'Vuex',
        axios: 'axios',
        nprogress: 'NProgress',
        clipboard: 'ClipboardJS',
        '@antv/data-set': 'DataSet',
        'js-cookie': 'Cookies'
    },
    css: [],
    js: [
        '//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
        '//cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
        '//cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
        '//cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js',
        '//cdn.jsdelivr.net/npm/[email protected]/nprogress.min.js',
        '//cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js',
        '//cdn.jsdelivr.net/npm/@antv/[email protected]/build/data-set.min.js',
        '//cdn.jsdelivr.net/npm/[email protected]/src/js.cookie.min.js'
    ]
}

module.exports = {
    devServer: {
        proxy: {
            '/api': { //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致
                target: process.env.VUE_APP_WEB_BASE_URL,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }, '/compute_api': { //此处要与 /services/api.js 中的 COMPUTE_API_PROXY_PREFIX 值保持一致
                target: process.env.VUE_APP_COMPUTE_BASE_URL,
                changeOrigin: true,
                pathRewrite: {
                    '^/compute_api': ''
                }
            }

        },

    },
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, "./src/theme/theme.less")],
        }
    },
    configureWebpack: config => {
        config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];
        config.performance = {
            hints: false
        }
        config.plugins.push(
            new ThemeColorReplacer({
                fileName: 'css/theme-colors-[contenthash:8].css',
                matchColors: getThemeColors(),
                injectCss: true,
                resolveCss
            })
        )
        // Ignore all locale files of moment.js
        config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
        // 生产环境下将资源压缩成gzip格式
        if (isProd) {
            // add `CompressionWebpack` plugin to webpack plugins
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }))
        }
        // if prod, add externals
        if (isProd) {
            config.externals = assetsCDN.externals
        }
    },
    chainWebpack: config => {
        // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
        if (isProd) {
            config.plugin('optimize-css')
                .tap(args => {
                    args[0].cssnanoOptions.preset[1].colormin = false
                    return args
                })
        }
        // 生产环境下使用CDN
        if (isProd) {
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = assetsCDN
                    return args
                })
        }
    },
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    modifyVars: modifyVars(),
                    javascriptEnabled: true
                }
            }
        }
    },
    publicPath: process.env.VUE_APP_PUBLIC_PATH,
    outputDir: 'dist',
    assetsDir: 'static',
    productionSourceMap: false
}