https://dev.to/getd/wtf-are-babel-and-webpack-explained-in-2-mins-43be
원문입니다. (의역 많습니다)
바벨과 웹팩은 사과🍎 와 바나나🍌 이다. 서로 다른 문제를 해결하기 때문에 동일선상에서 비교하기는 어렵다. 이 글에서 바벨과 웹팩의 개념을 설명한다.
바벨
바벨은 브라우저나 Node.js 가 알아먹을수 있게 간지나는 ES6+ 코드를 구린 ES5 코드로 변환해준다. 브라우저나 Node.js 가 지원하지 않는 최신버전의 코드를 사용하게 해준다.
아래는 요즘 개발자들이 사용하는 멋진 코드이다. 이 코드는 멋지지만 몇몇 브라우저나 Node.js는 이 코드를 이해하지 못한다.(Node.js 는 이제 ES6를 지원한다.)
// ES6 syntax
import moment from 'moment';
export default () => moment().format("YYYY Do MM");이 코드를 브라우저가 이해하도록 사양을 낮춘 버전의 코드이다.
const moment = require('moment')
function getDateString() {
const date = moment();
return date.format("YYYY Do MM");
}
exports.default = getDateString;이것이 바벨이 transpiler 인 이유이다.
바벨은 일반적으로 프론트엔드와 백엔드 에서 모두 사용한다.
반면에 웹팩은 프론트엔드 에서만 사용한다(거의).
웹팩
바벨이 자바스크립트만을 translate 한다면 웹팩은 모든것을 tranlate 한다. 예를들어 웹팩은 바벨을 사용하기도 하고, js 파일 안의 css들을 수집해서 bundle 하기도 한다.
웹팩이 그렇게 좋으면 왜 프론트에서만 씀?
백엔드는 js 만 쓰는 반면에 프론트 에서는 css,sass,image,fonts 등등 백엔드 보다 다양한 파일들을 다룬다.
웹팩은 사용자의 브라우저가 빠르게 로드할수 있도록 코드를 압축해서 작은 파일로 만드는 과정이다. 백엔드는 js 만 사용하기에 그럴필요가 없다.
백엔드에서도 서버사이드렌더링 시에는 쓰일수 있다.
요약
백엔드: 개발에 쓰이는 ES6+ 코드를 오래된 브라우저들도 알아먹게 바벨로 컴파일 한다.
프론트엔드: 웹의 속도를 위해 여러 파일들을 번들링 하는데 웹팩을 사용한다. 이때 바벨도 사용된다. create-react-app 을 사용하면 자동으로 웹팩과 바벨을 사용한다.
