Front-End
Babel Webpack 본문
Bable 과 Webpack에 대해 찾아보자.
Webpack
웹팩은 여러 개 파일을 하나로 합쳐주는 모듈 번들러다.
웹팩은 기본적으로 모듈을 지원하고 파일 분할 기능, css loader기능, jsx 변환 작업도 해준다.
(원하는 코드만 따로 분리해서 하나의 파일로 압축이 가능하다.)
여러개로 나눠진 자바스크립트 파일을 html이 실행할 수 있는 하나의 자바스크립트 파일로 합쳐준다.
왜 사용하는가?
많은 파일들을 다운받아올 때 네트워크 부하가 커지면서 느려지고 같은 이름의 변수나 함수 충돌을 방지하기 위해
네트워크 비용을 최소화 하기 위해서 이다.
이를 번들링이라 한다.
번들러를 사용하면 여러 개의 파일을 하나로 묶어주기 때문에 네트워크 접속의 부담을 줄여 빠른 서비스를 제공할 수 있따!
네가지 개념을 알아보자
✨ entry
엔트리는 의존성 그래프의 시작점을 의미한다.
엔트리 파일을 의존하는 파일은 없고, 엔트리가 A를 의존하고 A가 B, C를 의존하는 식으로 모듈이 연결된다.
이때 웹팩은 이미지, 폰트, 스타일 시트 역시 모듈로 관리한다.
설정파일에서 엔트리 파일을 지정할 수 있다.
✨ output
엔트리에 설정한 자바스크립트 파일을 시작으로,
의존되어 있는 모듈을 하나로 묶어서 보낸다.(번들링)
번들된 결과물이 나오는 위치를 기록하는 곳이다.
✨ loader
웹팩은 자바스크립트 파일 뿐만아니라 이미지, 폰프, 스타일 시트까지 전부 모듈로 관리한다.
웹팩은 자바스크립트만 사용하는데 자바스크립트가 아닌 파일들이 웹팩을 이해하도록 하는것이 로더다.
✨ plugin
로더는 (번들되기 전) 파일단위를 처리하는 반면,
플러그인은 번들된 결과물을 추가로 처리한다.
번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.
플러그인을 사용할 때는 웹팩 객체의 plugins 배열에 추가한다.
Babel
대표적인 트랜스파일러다.
트랜스파일러란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것이다.
모든 브라우저가 ES6 기능(최신 기능)을 제공하지 않기 때문에
ES5코드(구 기능)으로 변환시키는 과정이 필요하기 때문이다.
쉽게 생각하면
알아듣지 못하는 언어를 알아들을 수 있게 해석해서 보여주는 역할을 한다고 생각하면 된다.
