웹팩 등장 배경(feat. 자바스크립트의 모듈 시스템)

• 자바스크립트는 기본적으로 모듈 시스템을 지원하지 않는다.

  • 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각. 모듈들은 자신만의 파일 스코프(모듈 스코프)를 갖는다. ⇒ 모듈의 모든 자산(변수, 함수, 객체 등)은 기본적으로 캡슐화되어 다른 모듈에서 접근할 수 없다.
    • 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다(export). 또한 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다(import).
    • 자바스크립트는 모듈이 성립하기 위해 필요한 파일 스코프와 import, export를 지원하지 않는다.

• 즉, 자바스크립트는 파일마다 독립적인 파일 스코프를 갖지 않으므로, 자바스크립트 파일을 여러 개로 분리하여 script 태그로 로드하면 가져온 자바스크립트 파일들은 하나의 파일 내에 있는 것처럼 동작한다.
  ⇒ 모든 자바스크립트 파일은 하나의 전역을 공유한다. 따라서 전역 변수가 중복되는 등의 문제가 발생할 수 있다.

• 이런 상황에서 모듈 시스템으로 CommonJS와 AMD가 제안되었고, Node.js는 CommonJS를 채택했다.
  ⇒ Node.js 환경에서는 파일별로 독립적인 파일 스코프를 갖는다. 그러나 클라이언트 사이드에서 모듈화 문제를 해결할 방식이 필요했다.

• ES6에서는 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능을 추가했다.(ESM)

  • 그러나 ES6 모듈은 IE를 포함한 구형 브라우저에서는 동작하지 않으며, 트랜스파일링이나 번들링 처리가 추가적으로 필요하다.

• 이러한 배경에서 웹팩이 등장하였다. 웹팩은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러이다.

  • 웹팩을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없으며, HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다.

  • 번들이 중요한 이유

    1) 모든 모듈을 로드하기 위해 검색하는 시간이 단축됨

    번들링을 하면 한 파일 안에 모듈들이 모두 담겨 파일에 접근하는 횟수도 즐어들고 모든 모듈을 이해하는 시간이 줄어듦.

    2) 사용하지 않는 코드를 제거해줌

    3) 파일의 크기를 줄여줌

출처 : 모던 자바스크립트 딥다이브