import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { viteMockServe } from 'vite-plugin-mock'
import html from 'vite-plugin-html'
import * as path from 'path'
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig(({mode}) => {
  const env = loadEnv(mode, process.cwd())
  return {
    //base: mode === 'production' ? `${env.VITE_BASE_URL}${env.VITE_APP_PROJECT_NAME}/`: env.VITE_BASE_URL,
    resolve: {
      alias: {
        '@':  path.resolve(__dirname, 'src'),
        //'@ui': path.resolve(__dirname, 'src/components/common')
      }
    },
    css: {
      preprocessorOptions: {
        scss: { // scss config
          charset: false
        }
      }
    },
    plugins: [
      react(),
      viteMockServe({
        mockPath: 'mock',
        supportTs: false
      }),
      html({
        inject: {
          data: {
            title: env.VITE_APP_PAGE_NAME,
            gtag: env.VITE_APP_GA_ID
          }
        },
        minify: {
          removeAttributeQuotes: false
        }
      }),
      legacy(),
    ],
    // server: {
    //   port: 3001
    // },
    build: {
      target: 'es2015', // esbuild target
      assetsInlineLimit: 0, // source size limit
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        }
      },
      // rollupOptions: {
      //   output: {
      //     chunkFileNames: '[name]-[hash].js',
      //     entryFileNames: '[name]-[hash].js',
      //     assetFileNames: (assetInfo) => {
      //       if (/\.css$/.test(assetInfo.name)) { // output css files to css directory
      //         return '[ext]/[name]-[hash].[ext]'
      //       }
      //       if (/\.(jpg|png|gif|jpeg|svg)$/.test(assetInfo.name)) { // output image files to images
      //         return 'images/[name].[ext]'
      //       }
      //       return '[name]-[hash].[ext]'
      //     }
      //   }
      // }
    }
  }
})