0. Webpack, ES모듈 에 대한 조사

[hoyyChoi]

Webpack

• 브라우저에서 자바스크립트 파일들(모듈)을 묶어서(번들링) 사용하기 위함이며, 어떠한 자원(js, css,png 등)이나 자산 등을 전송, 구축 패키징이 가능하게 만드는 도구
• 여러 파일을 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있음.
• 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉬움.
• 모듈화 문법을 (import,export) 이용하여 번들링하며, 현재 모듈 번들러로 많이 사용됨.

ESM (ECMAScript Modules)

• 모듈화 문법인 import, export를 별도의 도구 없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미
• script 태그에 type="module" 속성을 추가하면 정상 동작
• Vite에서 이 방식을 적용하기 때문에 로컬 서버 구동 속도가 매우 빠름.
• Vite의 빌드 결과물 역시 기본적으로 번들링은 하지 않고 로컬 개발 서버의 ESM 방식을 사용