Vite 설정 (React + TypeScript)
React + TypeScript 프로젝트를 위한 Vite 설정. Path alias, 프록시, 빌드 최적화 포함.
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '');
const isProd = mode === 'production';
return {
plugins: [
react({
babel: {
plugins: isProd ? [] : [],
},
}),
],
resolve: {
alias: {
'@': resolve(__dirname, './src'),
'@components': resolve(__dirname, './src/components'),
'@hooks': resolve(__dirname, './src/hooks'),
'@utils': resolve(__dirname, './src/utils'),
'@types': resolve(__dirname, './src/types'),
'@assets': resolve(__dirname, './src/assets'),
'@api': resolve(__dirname, './src/api'),
},
},
server: {
port: 3000,
strictPort: false,
open: false,
cors: true,
proxy: {
'/api': {
target: env.VITE_API_URL ?? 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
'/ws': {
target: env.VITE_WS_URL ?? 'ws://localhost:8080',
ws: true,
changeOrigin: true,
},
},
},
build: {
outDir: 'dist',
sourcemap: !isProd,
minify: isProd ? 'esbuild' : false,
target: 'ES2022',
chunkSizeWarningLimit: 1000,
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
},
chunkFileNames: 'assets/[name]-[hash].js',
entryFileNames: 'assets/[name]-[hash].js',
assetFileNames: 'assets/[name]-[hash].[ext]',
},
},
},
preview: {
port: 4173,
strictPort: true,
},
test: {
globals: true,
environment: 'jsdom',
setupFiles: ['./src/test/setup.ts'],
coverage: {
reporter: ['text', 'json', 'html'],
exclude: ['node_modules/', 'src/test/'],
},
},
};
});