브라우저에서 자바스크립트 파일들을 묶어서(번들링) 사용하기 위함이며, 어떠한 자원이나 자산 등을 전송, 구축 패키징이 가능하게 만드는 도구이다.
Webpack이 등장배경
규모가 있는 System에서는 많은 Javascript가 존재하게 된다. 이 많은 Javascript 파일을 하나의 파일로 관리하기엔 어려움이 있다. (SPA _ HTML에 수백개의 자바스크립트 관리 어려워!)
- 여러 개의 파일을 브라우져에서 로딩하는 것은 네트워크 비용이 그만큼 사용하여 반응속도가 느려지게 된다.
- 더 나아가 각 파일의 변수 충돌의 위험성도 존재하게 된다.
→ Weppack, Broserify, Parcel 과 같은 도구들이 번들러에 속한다. 그 중에서도 가장 인기 있는 번들러가 웹팩이다. (performance가 우수함!)
4가지의 구성요소
1) entry : 자바스크립트 파일로 이루어진 여러 모듈들을 포함하고 있는 파일을 정의할 때 사용 ex) app.js
2) output: 웹팩의 번들링에 대한 결과물을 어디에 생성해낼 것인지, 어떤 이름으로 만들것인지 정의하는 요소
3) loader :
- 웹팩이 이해할 수 있도록 해주는 것이 로더의 역할
- ES6형식으로 작성된 자바스크립트를 ES5로 바꾸어 컴파일 시켜주는 바벨이라는 로더도 있다.
4) plugin: 번들링된 결과물에 대해서 적용할 수 있는 속성
loader와 plugin 차이점
loader: 파일을 해석하고 변환하는 과정에 관여하여 모듈을 처리
plugin: 해당 결과물의 형태를 바꾸는 역할을 하므로 번들링 된 파일을 처리
-> 번들된 파일을 압출할 수 있고 파일 복사, 추출, 별칭 사용등의 부가 작업가능
大器晩成