Webpack 이란?
webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다.
webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 의존성 그래프를 만든다.
ex)
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};- vue CLI 등에서 npm run build 와 같이 대체로 webpack으로 결과물 변환할때 사용함
모듈이란?
프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위
ex) add, subtract를 갖고있는, 하나로 묶은 js 파일
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}정적 모듈 번들러 이란?
모든 의존성을 파악하고 여러 모듈이나 파일들을 하나의 번들로 묶어주는 역할을 한다. (bundle: 묶음)
주요 목적
여러 파일 간의 의존성을 관리하고, 이를 통해 웹 페이지의 성능을 최적화하고 개발 프로세스를 간편화하는 것이다.
ex) 여러 개의 JavaScript 파일이나 CSS 파일을 하나의 번들로 묶어주면 HTTP 요청의 수를 줄이고 로딩 시간을 단축할 수 있다.
의존성 그래프란?
의존성 그래프(Dependency Graph)는 각 모듈이 다른 모듈에 어떻게 의존하는지를 의존성을 시각화하여 보여준다.
Webpack 장점
- HTTP 요청의 수를 줄인다.
- 성능 최적화
- 코드 분할(Code Splitting)
- 레이지 로딩(lazy loading)
- 트리 쉐이킹(tree shaking)
- 모듈화와 의존성 관리
Webpack 단점
- 초기 빌드 시간이나 개발 서버의 반응 속도가 느릴 수 있다.
- 초기 설정이 어려움
Vite란?
빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구
Vite를 탄생 배경
애플리케이션이 발전함에 따라 JavaScript 모듈의 개수도 증가하게 되었고, HMR을 사용하더라도 변경된 파일이 적용될 때 까지 많은 시간이 걸릴 수 있다.
즉, 시간 많이 걸린다는 뜻
HMR(Hot Module Replacement) 이란?
모듈 전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거한다.
다음과 같은 몇 가지 방법으로 개발 속도를 크게 높일 수 있다.
- 전체 다시 로드 중에 손실되는 애플리케이션의 상태를 유지한다.
- 변경된 사항만 갱신하여 개발 시간을 절약한다.
- 소스 코드에서 CSS/JS를 수정하면 브라우저에서 즉시 업데이트한다. 이는 브라우저의 개발자 도구에서 직접 스타일을 변경하는 것과 거의 비슷하다.
Vite? Webpack?
Webpack
- 코드 스플리팅, 로더와 플러그인을 통한 변환과 최적화 기능을 제공한다.
- 설정이 복잡할 수 있지만, 다양한 기능과 확장성을 제공하여 매우 유연하게 사용할 수 있다.
Vite
- ES 모듈 기반의 개발 환경을 제공하며, 빌드 과정에서 미리 번들링하지 않고 필요한 모듈을 실시간으로 처리하여 빠른 개발 속도를 제공한다.
- 최신 프론트엔드 프레임워크와의 호환성이 뛰어나다.
속도라면 Vite, 많은 로더, 플러그인이 필요하다면 Webpack 선택해야 할듯하다.
참고
https://webpack.kr/concepts/
https://f-lab.kr/insight/the-role-and-importance-of-webpack-in-modern-web-development?gad_source=1
https://ko.vitejs.dev/guide/
