웹팩
오픈 소스 자바스크립트 모듈 번들러
여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리
의존성을 분석해 모듈을 번들화
프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build) 과정을 통해 하나의 파일로 만듬
모듈
프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위
모듈 번들링
웹 애플리케이션을 구성하는 몇십, 몇 백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작
웹팩 장점
파일 단위의 자바스크립트 모듈 관리의 필요성
자바스크립트의 변수 유효 범위 (스코프)는 기본적으로 전역 범위를 기본으로 가져 어디에서든 변수에 접근 가능
따라서 파일 단위로 자바스크립트 코드를 관리할 때 모듈화 하지 않으면 문제 발생
javascript 파일을 모듈로 관리 필요
CommonJS, AMD, ESModule 등의 모듈 시스템
웹팩은 모듈화 방식 중 **ESModule 방식** 사용
웹 개발 작업 자동화 도구
웹 서비스를 개발하고 웹 서버에 배포할 때 HTML, CSS, JS 압축 / 이미지 압축 / CSS 전처리기 변환 등의 반복작업 필요
자동화 해주는 도구들이 필요
Grunt와 Gulp 같은 도구
웹 애플리케이션의 빠른 로딩 속도와 높은 성능
여러 파일을 하나로 병합 및 압축하는 기능을 제공
서버로의 수많은 요청을 줄이기 때문에 네트워크에 부담을 줄여 더 빠른 서비스를 제공
js 뿐만이 아니라 모든 리소스를 모듈로 취급하고 그 리소스들을 하나의 파일로 병합 및 압축
바벨
코드 자체를 자바스크립트로 변환
코드 변환기
최신의 코드를 쓰면서 최대한 많은 사람들이 사용하는데 불편하지 않도록 만들어줌
최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환
참고 사이트
https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#웹팩이란
https://joshua1988.github.io/webpack-guide/motivation/why-webpack.html#웹팩의-등장-배경
https://velog.io/@wearehplk/웹팩Webpack-바벨Babel
