⚡

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils')
    }
  }
})

// .env
VITE_API_URL=http://localhost:8080
VITE_APP_TITLE=My App

// Usage in code
const apiUrl = import.meta.env.VITE_API_URL
const isDev = import.meta.env.DEV
const isProd = import.meta.env.PROD
const mode = import.meta.env.MODE

// Import image
import logo from './logo.png'

// Import as URL
import workletURL from './worker?url'

// Import as string
import shaderString from './shader.glsl?raw'

// Import CSS
import './style.css'
import styles from './style.module.css'

// Dynamic import
const module = await import('./module.js')

// Files in /public are served at root
// /public/favicon.ico -> /favicon.ico

// Reference in code
<img src="/logo.png" />

// Or with base path
<img src={`${import.meta.env.BASE_URL}logo.png`} />

// styles.module.css
.button {
  color: red;
}

// Component
import styles from './styles.module.css'

export function Button() {
  return <button className={styles.button}>Click</button>
}

// Install preprocessor
npm install -D sass
npm install -D less
npm install -D stylus

// Use in components
import './styles.scss'
import './styles.less'

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

// React
import react from '@vitejs/plugin-react'

// Vue
import vue from '@vitejs/plugin-vue'

// Svelte
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [react()]
})

// Legacy browser support
import legacy from '@vitejs/plugin-legacy'

// PWA support
import { VitePWA } from 'vite-plugin-pwa'

// SVG as components
import svgr from 'vite-plugin-svgr'

// Auto import
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    react(),
    legacy({ targets: ['defaults', 'not IE 11'] }),
    VitePWA(),
    svgr()
  ]
})

export default defineConfig({
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true,
    minify: 'terser',
    target: 'esnext',
    
    rollupOptions: {
      input: {
        main: 'index.html',
        admin: 'admin.html'
      },
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'axios']
        }
      }
    }
  }
})

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
})