refactor: web 패키지 빌드 도구를 webpack에서 vite로 전환#211
Draft
jaeyoung-kwon wants to merge 6 commits into
Draft
Conversation
jaeyoung-kwon
force-pushed
the
refactor/web-webpack-to-vite
branch
from
cf36e7a to
7399d6a
Compare
- webpack.config.ts 삭제하고 vite.config.ts 추가
- swc-loader/copy-webpack-plugin/html-webpack-plugin/dev-server 등 webpack 전용 의존성 제거
- tanstackRouter, vite-plugin-svgr, @vitejs/plugin-react-swc 도입
- 환경 변수는 loadEnv + define으로 process.env.X를 빌드 상수로 치환해 src 코드 변경 없이 동작
- public/robots.{SERVER_TYPE}.txt → dist/robots.txt 리네임과 dev 빌드의 sitemap 제외 동작은 closeBundle 인라인 플러그인으로 대체
- "type": "module" 도입에 따라 babel.config.js → babel.config.cjs 로 리네임 (jest 호환)
- tsconfig moduleResolution을 nodenext에서 bundler로 정렬 (admin/maeil-mail와 일치)
- index.html에 vite 모듈 엔트리 스크립트 추가
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- @storybook/react-webpack5 → @storybook/react-vite (9.0.17 → 9.1.20 업그레이드 동반) - @storybook/addon-webpack5-compiler-swc, @svgr/webpack, tsconfig-paths-webpack-plugin, webpack, @types/webpack 제거 - .storybook/main.ts 재작성: viteFinal에서 mergeConfig로 환경 변수 define만 주입, SVG/path-alias는 메인 vite.config.ts와 vite-plugin-svgr에 위임 - .storybook/preview.tsx와 모든 *.stories 파일의 @storybook/react-webpack5 타입 import를 @storybook/react-vite로 일괄 교체 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
jaeyoung-kwon
force-pushed
the
refactor/web-webpack-to-vite
branch
from
7399d6a to
138d1e9
Compare
7746eee (refactor: web 앱 빌드를 webpack에서 vite로 전환)에 빌드 변환과 직접 관련 없는 4건이 함께 변경되어 있어 그 직전 상태로 복원: - public/sitemap.xml: 로그인 페이지(/login) 항목 복원, landing 페이지 priority 0.8 → 0.3 원상복귀 - src/contexts/AuthContext.tsx: /signup 경로에서 userProfile query를 비활성화하던 로직 제거 (vite 작업과 무관) - src/pages/my-page/components/NotificationSettingsSection/{ NotificationSettingsSection.tsx, SettingList.tsx }: 알림 카테고리 매칭이 7746eee에서 인덱스 기반으로 회귀했던 것을 77ab3f5 (refactor: 알림 카테고리 조회를 인덱스 매칭에서 category 키 매칭으로 변경)의 category 키 매칭 방식으로 다시 복원 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
jaeyoung-kwon
commented
May 5, 2026
Comment on lines
+11
to
21
| viteFinal: async (config) => { | ||
| return mergeConfig(config, { | ||
| define: { | ||
| 'process.env.API_BASE_URL': JSON.stringify( | ||
| process.env.API_BASE_URL ?? 'https://api-dev.bombom.news/api/v1', | ||
| ), | ||
| 'process.env.API_TOKEN': JSON.stringify(process.env.API_TOKEN ?? ''), | ||
| 'process.env.ENABLE_MSW': JSON.stringify(process.env.ENABLE_MSW ?? 'false'), | ||
| }, | ||
| }); | ||
|
|
||
| return { | ||
| ...config, | ||
| resolve: { | ||
| ...config.resolve, | ||
| plugins: [ | ||
| ...(config.resolve?.plugins || []), | ||
| new TsconfigPathsPlugin({}), | ||
| ], | ||
| }, | ||
| }; | ||
| }, |
Contributor
Author
There was a problem hiding this comment.
부연 설명: webpack 시절 main.ts가 60줄에서 24줄로 줄어든 이유
webpack 버전에서 webpackFinal이 직접 처리하던 세 가지가 vite 버전에서는 다음과 같이 분배됨:
-
환경 변수 주입 (
process.env.X→ 빌드 상수)- webpack:
webpack.EnvironmentPlugin+webpack.DefinePlugin(JSON.stringify(process.env))두 단계 - vite:
viteFinal에서mergeConfig로define만 주입. vite의define은 단순 raw 치환이라 문자열 값에는JSON.stringify로 따옴표를 직접 감싸야 함 (그래서JSON.stringify(... ?? '...')형태).??fallback은 storybook 단독 실행(storybook dev) 시 .env가 없는 케이스 대비.
- webpack:
-
SVG 처리 (
*.svg→ React component)- webpack:
imageRule.exclude = /\.svg$/로 기존 image rule을 깎고@svgr/webpack을 새 rule로 추가하는 수동 surgery - vite: 메인
web/vite.config.ts의vite-plugin-svgr이 처리.@storybook/react-vite가 메인 vite config을 자동 상속하므로 storybook 쪽에서 다시 선언할 필요 없음.
- webpack:
-
이미지 자산 처리 (
avif/png/jpe?g/gif)- webpack:
asset/resourcerule을 직접 push - vite: 빌트인. 별도 설정 불필요.
- webpack:
-
path alias (
@/,#/)- webpack:
TsconfigPathsPlugin을resolve.plugins에 주입 - vite: 메인
vite.config.ts의 alias 설정 + tsconfig를 storybook이 자동 상속.
- webpack:
요약: vite가 빌트인으로 처리하거나(이미지) 메인 config을 상속(SVG/alias)하는 부분이 많아 storybook main.ts는 "환경 변수 주입"만 남음.
jaeyoung-kwon
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 What
❓ Why
🔧 How
설정 매핑 — 무엇이 어디로 갔는가
동등하게 옮겨진 것
swc-loader@vitejs/plugin-react-swc@svgr/webpackvite-plugin-svgr@,#,@bombom/shared/env)resolve.aliasresolve.aliastanstackRouter/webpacktanstackRouter/vite(autoCodeSplitting: true)vite 빌트인이라 명시 제거된 것
HtmlWebpackPluginindex.html이 entry로 자동 처리CopyWebpackPlugin(assets, favicon, prerendered)public/자동 복사devServer.hot/historyApiFallback/client.overlay변경된 것
DefinePlugin('process.env': JSON.stringify(process.env))define에ENV_KEYS화이트리스트만 치환SwcMinifyWebpackPlugin(compress/mangle/format)esbuild.drop/pureusedExports/sideEffects명시sideEffectspostBuildAssetsPlugin(closeBundle hook)robots.{SERVER_TYPE}.txt → robots.txt리네임 보존청크 분할 변화 (의도 차이)⚠️
webpack 시절의
splitChunkscacheGroups에서 react/vendor/common 3-tier 분리 전략을 직접 정의했지만, vite로 옮기면서manualChunks에 react만 명시되어 있고 나머지는 TanStack RouterautoCodeSplitting+ dynamic import 기반 라우트 분할에 의존하도록 단순화됨.reactmanualChunks: { react: ['react', 'react-dom'] }autoCodeSplitting: true)vendorcommon(minChunks: 3)minSize/maxSize/maxAsyncRequests/maxInitialRequests튜닝autoCodeSplitting보충: TanStack Router 플러그인 옵션. 빌드 시 라우트 파일의component/loader/pendingComponent/errorComponent를 동적 import로 lazy 변환해 라우트별 별도 청크를 만들어줌. 첫 페이지 로딩 번들이 가벼워지는 대신, vendor 라이브러리가 각 라우트 청크에 함께 분산되어 재방문 시 vendor 캐시 효율은 webpack 시절보다 약화됨.후속 검토 후보:
manualChunks를 함수형으로 바꿔 vendor 단일 청크 캐싱 전략을 회복하거나, 라이브러리 그룹별(tanstack,emotion,sentry등)로 더 세밀하게 분할.성능 측정 (M-series Mac, pnpm 캐시 warm, 각 3회 측정)
(3371 / 3251 / 3082)
(2790 / 2620 / 2690)
webpack: 첫 compile 완료 시점
vite:
ready in시점(3458 / 2897 / 2983)
(439 / 600 / 424)
vendor~bfd775f7)index)해석
dist매번 삭제 후 cold build /node_modules/.cache또는node_modules/.vite매번 삭제 후 dev cold start.👀 Review Point
pnpm run start/pnpm run start:msw동작 확인 (3000번 포트, MSW 워커 등록)pnpm run build결과물 점검 —dist/robots.txt가 SERVER_TYPE에 맞는 내용인지, sitemap.xml이 prod 빌드에서만 남는지pnpm run storybook/pnpm run build-storybook정상 동작pnpm run build그대로 사용 — CI 변경 없음