JS - Webpack & Babel

Yuni·2023년 4월 11일

JS

목록 보기

13/17

웹팩(Webpack)과 바벨(Babel)은 모두 자바스크립트 프로젝트에서 사용되는 도구들이며, 모듈화된 코드를 관리할 수 있는 기능을 제공한다는 특성을 갖고 있습니다.

Webpack

웹팩(Webpack)은 모듈 번들러(Module bundler) 중 하나로, 웹 애플리케이션을 구성하는 리소스(HTML, CSS, JavaScript 등)들을 하나의 파일로 묶어주는 도구입니다. 이를 통해 웹 개발에서 모듈화된 코드를 관리하고 로딩 속도를 개선할 수 있습니다.

웹팩(번들러)의 탄생배경

초기 웹사이트들은 규모가 크지 않아 한 파일당 크기가 크지 않아 서비스의 유지보수가 어렵지 않았습니다만 점점 기술이 발전하면서 파일 하나당 코드의 양과 웹을 구성하는 파일 수, 크기 모두 커지게 되었죠.

상황이 이렇게 되면서 많은 문제점들이 발생했습니다.

번들링을 하지 않았을 때의 문제점

중복된 변수명(함수명)으로 인한 충돌, 위험
여러 사람이 같이 프로젝트를 만들다 보면 서로 만든 함수명, 변수명이 중복될 수 있습니다. 이렇게 되면 충돌이 일어날 수 있습니다.
파일 전송 속도 문제
웹 애플리케이션을 구성하는 파일의 양이 많을수록 사용자에게 해당 파일을 제공하는 시간은 오래 걸리기 마련입니다. 헌데 개 당 파일의 크기가 크기라도 한다면 유저는 요청한 웹 서비스가 로드되기 전까지 상당한 시간을 기다려야 합니다.

그래서 이렇게 번들링을 해주는 웹팩을 사용하게 되었습니다.

웹팩의 장점

웹팩을 사용하면 여러 모듈 파일을 하나의 번들 파일로 묶어줄 수 있어, 코드의 관리와 유지보수를 용이하게 할 수 있습니다. 또한, 코드를 최적화하고 로딩 속도를 개선하여 웹 페이지의 성능을 향상시킬 수 있습니다.

기본 개념

엔트리(Entry)
웹팩이 모듈 번들링을 시작할 위치를 나타냅니다. 여러 개의 엔트리를 지정할 수 있으며, 각각의 엔트리에 대해 하나의 번들 파일이 생성됩니다.
아웃풋(Output)
웹팩이 번들링한 파일을 저장할 위치를 나타냅니다. 보통은 하나의 파일로 번들링되며, 해당 파일은 HTML 파일에서 참조됩니다.
로더(Loader)
웹팩이 지원하지 않는 파일(예: CSS, 이미지 등)을 모듈화하고 번들링하기 위해 사용됩니다. 로더를 이용하여 해당 파일을 모듈화하고, 웹팩에서 인식할 수 있는 형태로 변환해줍니다.
플러그인(Plugin)
웹팩의 기능을 확장하기 위해 사용됩니다. 번들링 전/후에 동작하며, 로더로 처리할 수 없는 작업(예: HTML 파일 생성, 파일 복사 등)을 수행할 수 있습니다.

Babel

바벨은 최신 자바스크립트 문법을 구형 브라우저에서도 호환 가능한 코드로 변환하여 제공하는 도구입니다. 이를 통해 모든 브라우저에서 동일한 동작을 하도록 보장할 수 있습니다. 쉽게말해 ES6언어를 ES5언어로 바꿔주는 트랜스파일러 중 하나입니다.

장점

최신 자바스크립트 문법을 구형 브라우저에서도 사용 가능
개발자는 구형 문법에 얽매이지 않고 새로운 문법과 기능을 사용할 수 있게 되어 개발 생산성을 향상시킬 수 있습니다.
구형 브라우저에서도 동작 가능
사용자들이 더 많은 환경에서 동일한 기능을 가진 애플리케이션을 사용할 수 있습니다.

바벨의 주요 플러그인

바벨에서는 다양한 플러그인을 제공하여 사용자가 필요한 변환 규칙을 선택할 수 있습니다. 대표적인 플러그인으로는 다음과 같은 것들이 있습니다.

@babel/preset-env
최신 자바스크립트 문법을 구형 브라우저에서 호환 가능한 코드로 변환하는 플러그인입니다. 이를 통해 브라우저 호환성을 개선할 수 있습니다.
@babel/preset-react
리액트(React)에서 JSX 문법을 사용할 수 있도록 변환해주는 플러그인입니다.
@babel/plugin-proposal-class-properties
클래스(Class) 문법을 사용할 수 있도록 변환해주는 플러그인입니다.
@babel/plugin-transform-runtime
바벨이 생성한 코드에서 중복되는 코드를 제거하여 번들 크기를 줄일 수 있는 플러그인입니다.

Webpack과 Babel의 차이점

웹팩은 모듈 번들러(Module Bundler)로서, 자바스크립트와 그 외의 모든 종류의 파일들을 모듈로 관리하고 하나의 번들로 묶어서 사용합니다. 이를 통해 웹 애플리케이션의 성능을 개선하고, 모듈화된 코드 관리를 용이하게 합니다.

바벨은 최신 자바스크립트 문법을 구형 브라우저에서도 호환 가능한 코드로 변환하여 제공하는 트랜스파일러(Transpiler)입니다. 이를 통해 새로운 문법과 기능을 사용할 수 있게 되어 개발 생산성을 향상시킬 수 있습니다. 또한, 구형 브라우저에서도 동작이 가능하게 함으로써 사용자들이 더 많은 환경에서 애플리케이션을 사용할 수 있습니다.