Webpack/Babel이란?

Webpack

SPA 프레임워크에 있는 다양한 자바스크립트 파일을 의존성을 분석해 하나의 html로 묶어주는 방식을 모듈 번들링이라고 하는데 이 작업 빌드(build)라는 과정을 거쳐 해주는것이 webpack이다. 최신 자바스크립트 프레임워크들은 SPA방식을 채택하고 있기 때문에 하나의 html파일에서 페이지 이동이 이루어진다.

Babel

babel은 코드 변환기로 간단히 설명하자면 es6이상의 문법으로 작성된 코드를 es5로 다운그레이드 시켜주는 역할을 한다. 이러한 다운그레이드 필요한 이유는 크로스 브라우징을 지원하기 위해서이다. 아직 es6를 지원하는 브라우저는 크롬정도인데 크롬이아닌 브라우저(Internet Explore등)을 사용하는 사람은 아직 많은편이다. 이때문에 es6 이상만을 지원하는 최신 기능들을 사용하지 못하는 불편함을 해소하기 위해 나온 라이브러리이다.

Nuxt.js

create nuxt 명령어를 사용해서 NuxtJs프로젝트를 만들고 나면 기본적으로 webpack과 babel이 포함되어 있다. 그로인해 개발이 완료된 프로젝트를 build명령을 통해 하나로 묶어주고, babel이 다양한 브라우저에서 실행 가능하도록 코드를 수정해준다.