웹팩과 바벨

Webpack이란 ?

• 모듈 번들링이라고 한다.
• html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다.
• 쉽게 말하면, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 Webpack 이라고 한다.

 

그럼 Webpack을 왜 사용해야 할까 ?

• 옛날에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함한다. 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다.
• 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.
• 하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화 해준다.

정리 하자면, 모듈 번들러는 웹 애플리케이션을 구성하는 많은 자원들 즉, 모듈들을 하나로 만들어 주는 것이고, 웹팩은 최신 프론트엔드에서 가장 많이 사용하는 모듈 번들러 라는 것이다.

 

 

 

Module 이란 ?

• 분리된 코드 조각
• 시스템을 이루는 논리적인 일부분

 

Bundling 이란 ?

• '묶는다'는 뜻. 
• 기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업을 말한다.

 

Bundler  이란 ?

• 여러 개의 파일을 묶어주는 도구.
• Webpack, Borserify, Parcel 등이 있음

 

babel 이란 ?

• ES6형식으로 작성된 JavaScript 코드들을 ES5로 바꿔주는 트랜스파일러이다
• 사용하는 이유로는 모든 실행환경에서 JavaScript가 정상 동작하도록 도와준다
• 즉, 최신 버전의 JS가 실행되지 않는 구버전 브라우저에서 실행시키거나, 특정 버전이상에서만 실행되는 코드를 정상적으로 동작하기 위해서 사용한다

 

babel 은 컴파일러? 트랜스파일러?

컴파일러
 한 언어로 작성된 코드를 다른 언어로 변환하는 것
트랜스파일러
 한 언어로 작성된 코드를 비슷한 수준의 추상화를 가진 언어로 변환하는 것

• Babel은 빌드 단계에서 JavaScript를 다른 언어로 변환하는게 아니라 어플리케이션에서
  설정된 환경에 맞게 또는 호환성에 맞는 하위 버전 JavaScript로 변환한다라는 의미에서
  트랜스파일러이다

출처 - https://sunyong-01.tistory.com/34