const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const StylelintWebpackPlugin = require('stylelint-webpack-plugin')

// 环境变量获取
const {
  VUE_APP_BASE_URL,
  VUE_APP_BASE_API,
  NODE_ENV,
  ENV_PX_TO_REM,
  IS_MOCK,
  MOCK_BASE_URL,
  ARCGIS_MAP_URL,
  ARCGIS_API_URL
} = process.env
const reqBaseUrl = IS_MOCK === 'true' ? MOCK_BASE_URL : VUE_APP_BASE_URL

// 是否是生产环境
const isProduction = NODE_ENV === 'production'

// 访问绝对路径
const pathJoin = dir => path.join(__dirname, dir)

// 解决element icon dart-scss 打包后线上ico偶发性乱码
// https://github.com/PanJiaChen/vue-element-admin/issues/3526
function iconUnicodeToUTF8 (config) {
  const sassLoader = require.resolve('sass-loader')
  config.module.rules.filter(rule => {
    return rule.test.toString().indexOf('scss') !== -1
  })
    .forEach(rule => {
      rule.oneOf.forEach(oneOfRule => {
        const sassLoaderIndex = oneOfRule.use.findIndex(item => item.loader === sassLoader)
        oneOfRule.use.splice(sassLoaderIndex, 0, { loader: require.resolve('css-unicode-loader') })
      })
    })
}

module.exports = {
  lintOnSave: 'warning',
  publicPath: '/',
  outputDir: 'dist',
  productionSourceMap: false,
  configureWebpack (config) {
    iconUnicodeToUTF8(config)

    config.resolve = {
      extensions: ['.vue', '.js', '.json'],
      alias: {
        '@': pathJoin('src'),
        '@utils': pathJoin('src/utils'),
      },
    }

    // 从外部引入的库，比如在 index.html 中引入 cdn 地址
    config.externals = {
      // key 表示 import x from 'key'
      // value 表示外部引入的库暴露的全局变量名
      // 'vue': 'Vue',
      // 'vue-router': 'VueRouter',
      // 'vuex': 'Vuex',
      // 'axios': 'axios',
      // 'element-ui': 'ELEMENT',
      // 'echarts': 'echarts',
      // 'BMap': 'BMap',
      // 'lodash': '_',
      // 'xlsx': 'XLSX',
      // 'tinymce': 'tinymce',
      // 'nprogress': 'NProgress',
    }

    // 生产环境配置
    if (isProduction) {
      // 打包分析
      config.plugins.push(new BundleAnalyzerPlugin({
        analyzerMode: 'disabled', // static | disabled
        openAnalyzer: false,
      }))

      // terser debugger
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
    }
  },
  chainWebpack (config) {
    const svgRule = config.module.rule('svg')
    // 清空默认svg规则
    svgRule.uses.clear()
    // 针对svg文件添加svg-sprite-loader规则
    svgRule
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
    config
      .plugin('stylelint-webpack-plugin')
      .use(StylelintWebpackPlugin, [{
        files: ['**/*.{vue,html,css,scss,sass,less,style}'],
        failOnError: false,
        failOnWarning: false,
        emitWarning: true,
        emitError: false,
        cache: false,
      }])

    // 生产环境的配置
    config.when(isProduction, config => {
      // 启用 gzip 压缩插件
      config
        .plugin('compression-webpack-plugin')
        .use(CompressionWebpackPlugin, [{
          test: /\.js$|\.html$|\.css$/u,
          threshold: 4096, // 超过 4kb 压缩
        }])
    })
  },
  devServer: {
    // open: true,
    proxy: {
      // 接口代理
      [VUE_APP_BASE_API]: {
        target: reqBaseUrl,
        ws: false,
        changeOrigin: true,
      },
      // 地图服务代理
      '/arcgis': {
        target: ARCGIS_MAP_URL,
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/arcgis': '/arcgis',
        },
      },
      // api 资源代理
      '/ArcGis': {
        target: ARCGIS_API_URL,
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/ArcGis': '/ArcGis',
        },
      },
      // 远程加载代理
      '/vue': {
        target: 'http://128.10.9.113:9302',
        ws: false,
        changeOrigin: true,
      },
    },
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          outputStyle: 'expanded'
        }
      },
      postcss: {
        plugins: ENV_PX_TO_REM === 'open'
          ? [
            require('postcss-pxtorem')({
              rootValue: 100, // rem 大小
              propList: ['*'],
            }),
          ]
          : [],
      },
      scss: {
        prependData: '@use "~@/styles/variables.scss" as *;@use "~@/styles/mixins.scss" as *;',
      },

    },
  },
}