💡
이 글에서는 React 프로젝트를 Webpack에서 Vite로 마이그레이션한 경험을 공유합니다. 주요 변경 사항, 설정 조정, 그리고 최종적으로 얻은 성능 향상에 대해 알아보세요. 개발 환경 속도가 크게 개선되고 복잡한 설정이 줄어든 과정을 확인하실 수 있습니다.
마이그레이션 이유
개발 환경에서 설정과 트러블 슈팅
개발 환경에서의 트러블슈팅은 주로 소스 코드와 config, 패키지 변경에서 이뤄졌습니다.
index.html 관련 설정
index.html 위치 변경: %root_dir%/public/index.html → %root_dir%/index.html
허용되지 않는 html 파일 내 %env_variable% 제거 (참고: 4.2.0 버전부터 지원됩니다)
기본 tsx 파일(main.tsx, or index.tsx)의 script module import 추가
<script type="module" src="/src/index.tsx"></script>
css import: 허용되지 않는 nodemodules nested @import ~
- javascript import로 nodemodules css 파일들 가져오기로 변경
component tsx 파일 설정
- useScript 시 상대경로 → 절대경로(리액트 페이지 루트에서 시작)
vite config 설정하기(vite.config.ts)
import { loadEnv } from 'vite';
const env = loadEnv(mode, process.cwd(), '');
define: {
__APP_ENV__: env.APP_ENV,
'process.env': env,
},
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
plugins: [viteCommonjs()]
배포 환경에서 설정과 트러블 슈팅
최종 config 파일들 상태
회사 도메인 연관 코드는 삭제했습니다.
변경 전 webpack 설정
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
const reactRefreshOverlayEntry = require.resolve('react-dev-utils/refreshOverlayInterop');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_module/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(svg|png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputhPath: 'imgs',
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
}),
new ReactRefreshWebpackPlugin({
overlay: {
entry: webpackDevClientEntry,
module: reactRefreshOverlayEntry,
},
}),
],
};
변경 후 vite 설정
import { defineConfig, loadEnv } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import viteCommonjs from 'vite-plugin-commonjs';
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
plugins: [reactRefresh(), viteCommonjs()],
root: './',
define: {
__APP_ENV__: env.APP_ENV,
'process.env': env,
},
base: '/',
build: {
outDir: './build',
manifest: true,
rollupOptions: {
input: 'index.html',
output: {
dir: './build',
format: 'esm',
},
},
},
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
}
};
});
최종 결과
글 작성을 염두에 두지 못하고 뒤늦게 정리하다보니 내용이 미흡해서 아쉽네요. 누군가에게는 도움이 되길 바랍니다.
