웹팩 (Webpack)

웹팩 (Webpack)

웹팩은 오픈 소스 자바스크립트 모듈 번들러 중 하나로써 여려개의 자바스크립트 파일을 하나의 자바스크립트 코드로 압축하여 최적화하는 라이브러리이다.
요즘 많이 사용하는 SPA는 하나의 HTML파일과 여러개의 자바스크립트 파일들을 포함한다. 이때 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 따라서 여러 파일을 하나의 파일로 번들링 해서 웹 페이지 성능을 최적화 해준다.

장점

1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다.
2. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다.
3. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다.

바밸 (Babel)

최신 업데이트 중에 ES6버전은 큰 업데이트 부분을 차지한다.크게 일어난 만큼 ES6를 지원해주는 브라우저가 있다. 그 중에서는 지금까지는 크롬, 사파이, 파이어폭스(98%)와 같은 에버그린 브라우저는 최신 업데이트 버전으로 지원을 해준다.
하지만 인터넷 익스플로러11을 사용하는 비율도 11% 정도나 되는데 지원을 하지 않는다. 그러므로 아직 구 버전을 사용하는 ES5버전으로 바꿔주어야 한다.
이렇듯 ES6버전을 구 버전인 ES5로 변환해주는 자바스크립트 트랜스컴파일러 이다.

출처:
https://medium.com/@woody_dev/js-webpack-1-%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-f29ebca31da4
https://velog.io/@yon3115/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%95%84%EC%88%98-Webpack%EC%9D%B4%EB%9E%80