웹팩이란

웹팩과 같은 모듈 번들러가 없던 시절, 항상 서버로부터 html 문서를 받아오면 파싱을 시작하고, script 태그를 만나게 되면 진행과정이 정지하면서 스크립트파일요청 및 처리를 진행하게 된다.

http1.1 버전일 때에는 연결을 지속적으로 유지시킬 수 없었기 때문에 파일요청당 연결한번으로 이루어져 요청시간이 몹시 길어졌다.

저 수많은 파일들을 계속해서 서버와 요청하면서 가져온다고 생각한다면 몹시 비효율적이다.

그리고 제일 병목현상이 심한 부분이 script라는 것이지, 서버로부터 받아와야 하는 데이터는 저 뿐만 아니라 css, font, favicon 등 수도없이 다양하다.

따라서, 매번 요청을 보낼때 하나씩 가져오는 것이 아닌 한번에 가져오는 방법이 필요하고, 이를 위해서는 요청하는 횟수 자체가 줄어들어야 한다.

이를 위해 웹팩과 같은 모듈 번들러가 태어나게 되었다.

웹팩은 수많은 의존성 관계에 있는 모듈들을 하나로 압축하여 만든 후 요청을 해주기 때문에 유지보수와 가독성에 좋다.
또한 모듈 단위로 개발이 가능하게 만들어준다. (각 js 파일별로 필요한 로직을 짜고 웹팩으로 압축한다)

이전처럼 script 형태로 사용하는 방식은 전역에 변수들이 서로 노출되기 때문에 충돌이 날 가능성이 높았다.
모듈 시스템은 각 파일별로 독자적인 모듈 스코프를 가지고 있기 때문에 변수명의 충돌을 걱정하지 않아도 된다. ( 각 모듈이 즉시실행함수 형태 )

webpack의 옵션

1. Entry : 자바스크립트 파일의 진입시점을 표현한다. 객체로 되어있고 키값과 경로를 지정하면 그곳부터 읽어나간다. ( 값이 배열일 시 여러 진입점 )
   2.Output : 번들러된 결과물이 저장될 위치이다( path를 통해 저장위치를 설정. filename은 Entry에서 지정한 키를 따르게 하려면 [name].js 고정
2. Loader : 자바스크립트만 기본적으로 읽어들이는 웹팩에 css, typescript, babel 등과 같은 파일들 역시 같이 함께 압축하기 위한 추가설정이다.
3. plugins : 압축을 진행하면서 부가적으로 옵션을 덧붙이고 싶을 때에 사용하는 파트이다. 외부의 모듈을 가져와서 추가하는 방식이다.