그리고 webpack 대신 vite(https://github.com/vitejs/vite) 쓰게 된다.
둘의 공통점을 빠르다(여기엔 효율적이다라는 의미도 포함된다. 예로 webpack 처럼 모든것 다시 번들링하는게 아닌 필요한 부분만 하는등)
bun 그냥 설치만 하면 사용방법도 yarn 과 거의 같아서 별 신경쓸게 없다.
그런데 webpack, vite 은 각각 설정 파일이 있고 다르다.
webpack 설정 -> vite 설정을 만들어 보자.
# vite 설치(package.json 에도 vite 가 명시된다.)
bun install vite vite-plugin-node @vitejs/plugin-react @babel/core babel-preset-env --save-dev
# 참고 새로운 프로젝트를 만들때는 프로젝트 이름의 디렉토리에 전체 설정들이 생성된다.
bun create vite
# 이미 프로젝트가 있는 상태
# 다음과 vite.config.js 파일을 만들고 수정하거나 변경되는 부분을 수정하거나
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': '/src',
},
},
})
# 아니면 webpack.config.js chat-gpt 같은 LLM에서 변환시키면 편하다.
# webpack -> vite 변경되는 설정들
webpack vite
babel-loader 필요 없음 (ESBuild로 기본 트랜스파일링)
style-loader 기본 지원
css-loader, sass-loader 필요 시 bun install sass --save-dev 설치
file-loader, url-loader 기본 지원
html-webpack-plugin 필요 없음
# webpack -> vite 변경되는 코드들
webpack vite
process.env.NODE_ENV import.meta.env.MODE
require() import (ECMAScript Modules(ESM) JavaScript의 공식 모듈 시스템)
require.context() 지원 안됨
# 클라이언트 번들링은 webpack, vite 둘다 된다.
# 서버 번들링은
# webpack.config.js 설정으로 target: "node" 명시하면되지만
# vite 는 기본적으로 안되고 vite-plugin-node 같은 플러그인을 이용해야 한다.