1. Webpack이 무엇인지, 어떤 문제를 해결하는지 설명해주세요.
- webpack은 다양한 모듈을 하나의 파일로 묶어주는 번들러입니다.
- wepack을 도입함으로써 식별자의 유효 범위 문제를 해결할 수 있습니다. 또한 여러 모듈을 하나의 파일로 묶어서 한번에 불러오기 때문에 로딩 속도가 빨라집니다.
2. Webpack의 loader, plugin에 대해 설명해주세요.
-
loader는 파일을 import하거나 로드할 때 전처리를 해줍니다.
- loader를 사용하여 TypeScript 같은 다른 언어를 JavaScript 문법으로 변환해줄 수 있습니다.
- 또한 이미지를 data URL 형식의 문자열로 변환할 수 있습니다.
- 그리고 JavaScript 모듈에서 CSS 파일을 직접 import할 수 있게 해줍니다.
-
plugin은 loader가 할 수 없는 다른 작업을 수행할 목적으로 제공됩니다.
- plugin의 예로는 컴파일 시 전역변수를 허용하는 DefinePlugin, HMR을 할 수 있게 하는 HotModuleResplacementPlugin, 번들러를 제공할 HTML을 생성하는 HtmlWebackPlugin 등이 있습니다.
2.1 어떤 loader, plugin을 써봤나요?
- css-loader와 ts-loader를 사용해봤습니다.
- DefinePlugin, HotModuleResplacementPlugin, 그리고
HtmlWebackPlugin을 사용해봤습니다.
3. Vite가 Webpack에 비해 가지는 장점이 있나요? (Webpack은 어떤 문제를 가지고 있었나요?)
- Wepack의 단점은 개발 서버의 초기 구동시 빌드 속도가 느리고, 애플리케이션 규모가 커질수록 HMR 속도가 느려지며, 설정이 복잡해서 초기 설정시 시간이 걸린다는 것입니다.
- Vite는 dependencies를 사전 번들링하여 초기 로딩 속도를 개선했고, 화면에서 필요한 소스코드만 가져오게 하여 HMR 속도가 애프리케이션 규모에 영향을 덜 받게 했습니다.
- 또한 Vite는 비교적 간편한 설정과 다양하게 제공되는 템플릿을 통해 설정을 쉽게 할 수 있습니다.
