let path = require('path') // 引入path模块
const webpack = require('webpack') // 引入webpack模块
const ThemeColorReplacer = require('webpack-theme-color-replacer') // 引入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') // 引入webpack压缩插件

const productionGzipExtensions = ['js', 'css'] // 需要压缩的文件后缀
const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

const assetsCDN = { // 静态资源CDN地址
  // webpack 编译好的文件存在哪里
  externals: { 
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    nprogress: 'NProgress',
    clipboard: 'ClipboardJS',
    '@antv/data-set': 'DataSet',
    'js-cookie': 'Cookies'
  },
  css: [
  ],
  js: [
    '/js/vue.min.js',
    '/js/vue-router.min.js',
    '/js/vuex.min.js',
    '/js/axios.min.js',
    '/js/nprogress.min.js',
    '/js/clipboard.min.js',
    '/js/data-set.min.js',
    '/js/js.cookie.min.js'
  ]
}

module.exports = {
  devServer: { // 代理配置
    proxy: {
      '/api': { //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致
        target: process.env.VUE_APP_API_BASE_URL,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  pluginOptions: { // 插件配置
    'style-resources-loader': { // 全局样式配置
      preProcessor: 'less', // 预处理器
      patterns: [path.resolve(__dirname, "./src/theme/theme.less")], // 引入全局样式
    }
  },
  // webpack配置
  configureWebpack: config => { // webpack 配置
    config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"]; // 兼容ie
    config.performance = { // 性能配置
      hints: false // 关闭性能提示
    }
    config.plugins.push( // 配置主题色替换插件
      new ThemeColorReplacer({ // 主题色替换插件
        fileName: 'css/theme-colors-[contenthash:8].css', // 生成的文件名
        matchColors: getThemeColors(), // 主题色 从src/utils/themeUtil.js中获取
        injectCss: true, // 是否注入css
        resolveCss // 解析css
      })
    )
    // Ignore all locale files of moment.js
    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)) // 忽略moment的本地化文件
    // 生产环境下将资源压缩成gzip格式
    if (isProd) { // 如果是生产环境
      // add `CompressionWebpack` plugin to webpack plugins
      config.plugins.push(new CompressionWebpackPlugin({ // 配置webpack压缩插件
        algorithm: 'gzip', // 压缩算法
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        minRatio: 0.8 // 压缩比例，值为0 ~ 1
      }))
    }
    // if prod, add externals
    if (isProd) { // 如果是生产环境
      config.externals = assetsCDN.externals // 配置静态资源CDN地址
    }
  },
  chainWebpack: config => { // webpack 链式配置
    // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
    if (isProd) { // 如果是生产环境
      config.plugin('optimize-css') // 配置css压缩
        .tap(args => { // 获取参数
            args[0].cssnanoOptions.preset[1].colormin = false // 关闭colormin
          return args // 返回参数
        })
    }
    // 生产环境下使用CDN
    if (isProd) { // 如果是生产环境
      config.plugin('html') // 配置html
        .tap(args => { // 获取参数
          args[0].cdn = assetsCDN // 配置静态资源CDN地址
        return args // 返回参数
      })
    }
  },
  css: { // css配置
    loaderOptions: { // css预设器配置项
      less: { // 配置less（其他样式解析用法一致）
        lessOptions: { // less 配置
          modifyVars: modifyVars(), // 主题色 从src/utils/themeUtil.js中获取
          javascriptEnabled: true // 允许内联js 用于动态修改主题色
        }
      }
    }
  },
  publicPath: process.env.VUE_APP_PUBLIC_PATH, // 部署应用包时的基本 URL
  outputDir: 'dist', // 生产环境构建文件的目录
  assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  productionSourceMap: false // 生产环境的 source map
}