[ETC] 웹팩의 기본 개념

자바스크립트 코드가 많아지면 하나의 파일로 관리하는데 한계가 있다.
그렇다고 여러개 파일을 브라우져에서 로딩하는 것은 그만큼 네트웍 비용을 치뤄야하는 단점이 있다.
뿐만 아니라 각 파일은 서로의 스코프를 침범하지 않아야 하는데 잘못 작성할 경우 변수 충돌의 위험성도 있다.

webpack은 서로 연관 관계가 있는 웹 자원들을 js, css, img와 같은 스태틱한 자원으로 변환해주는 모듈 번들러입니다.
자원들을 최적화해서 압축 등 웹페이지의 성능을 끌어올려줍니다.

웹팩의 주요 네 가지 개념

1. 엔트리
자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. 

의존성 그래프의 시작점을 웹팩에서는 엔트리(entry)라고 한다.
웹팩은 엔트리를 통해서 필요한 모듈을 로딩한고 하나의 파일로 묶는다.

2. 아웃풋
엔트리에 설정한 자바스크립트 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶을 것이다.

번들된 결과물을 처리할 위치는 output에 기록한다.

3. 로더
웹팩은 모든 파일을 모듈로 관리한다고 했다.
자바스크립트 파일 뿐만 아니라 이미지, 폰트, 스타일시트도 전부 모듈로 관리한다.
그러나 웹팩은 자바스크립트 밖에 모른다. 

비 자바스크립트 파일을 웹팩이 이해하게끔 변경해야하는데 로더가 그런 역할을 한다.

4. 플러그인
로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.

5. 정리웹팩은 기본적으로 모듈 번들러다.의존성 그래프에서 엔트리로 그래프의 시작점을 설정하면 웹팩은
모든 자원을 모듈로 로딩한 후 아웃풋으로 묶어준다. 로더로 각 모듈별로 바벨, 사스변환 등의
처리하고 이 결과를 플러그인이 받아 난독화, 텍스트 추출 등의 추가 작업을 한다.