migrate webpack to vite

요즘은 yarn 대신 bun(https://github.com/oven-sh/bun) 을 쓰게 된다.(예전에 bower -> yarn 으로 바뀐지가 몇년 되지 않은것 같은데 트렌드가 참 빠르다.)

그리고 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 같은 플러그인을 이용해야 한다.