What is Webpack?

이 글은 웹팩 핸드북을 통해 공부한 내용을 정리한 것입니다🤓

웹팩이 뭐지?

웹팩이란 최신 프론트엔드 프레임워크에서 제일 많이 사용되는 모듈 번들러이다.

• 모듈 번들러란?
  웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고, 이를 조합해서 하나의 결과물을 만드는 도구

• 모듈이란?
  모듈이란 특정 기능을 갖는 작은 코드 단위를 의미한다. 성격이 비슷한 기능들을 하나의 의미있는 파일로 묶어 '모듈'이라고 표현할 수 있다.
  웹팩에서 말하는 모듈이라는 개념은 위의 코드 단위의 의미만 가지는게 아니라, 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 즉 HTML, CSS, JavaScript 등 모든 파일이 다 각각의 모듈이다.

• 모듈 번들링이란?
  웹 애플리케이션을 구성하는 수 많은 자원들을 하나의 파일로 병합 및 압축 해주는 동작. (번들링 == 빌드 == 변환, 세 단어 모두 같은 의미로 쓰임)
  

웹팩이 필요했던 이유

• 파일 단위의 자바스크립트 모듈 관리의 필요성
  자바스크립트는 기본적으로 전역 범위의 변수 유효 범위(var) 를 가지며, 이는 복잡한 웹 애플리케이션을 개발할 때 문제가 될 수 있기 때문에 파일 단위로 변수를 관리하는 것이 필요했다.
• 웹 개발 작업 자동화 도구
  코드를 수정하고 저장한 뒤 브라우저에서 새로 고침 누르기, HTML/CSS/JS 압축, 이미지 압축, CSS 전처리기 변환 등의 귀찮은 작업을 자동화 해주는 도구들이 필요했다.
• 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
  웹 사이트의 로딩 속도를 높이기 위해, 브라우저에서 서버로 요청하는 파일 숫자를 줄여야 했다. 또한 초기 페이지 로딩 속도를 높이기 위해 당장 필요하지 않은 자원들은 나중에 요청하고 싶었다.
  -> 웹팩은 기본적으로 필요한 자원은 필요할 때 요청하자는 철학을 가지고 있다.

웹팩으로 해결된 부분

• 자바스크립트 변수 유효 범위
  웹팩은 변수 유효 범위에 관한 문제점을 ES6 Modules 문법과 모듈 번들링으로 해결한다.
• 브라우저 별 HTTP 요청 수 제약
  브라우저에서 한 번에 서버로 보낼 수 있는 HTTP 요청 수는 정해져 있기 때문에 요청 수를 줄이는 것은 웹 애플리케이션의 성능을 높여주고 사용자가 사이트를 기다리는 시간을 줄일 수 있는 일이다. 웹팩은 여러 개의 파일을 하나로 합쳐 요청 수 제약을 피할 수 있다.
• 동적으로 원하는 순간에 모듈을 로딩하는 것이 가능해졌다. (Code Splitting 기능)
  
  
  
  

다음 포스팅은 웹팩 사용하기 실습을 해보면서 작성하겠다 👍