Webpack

웹팩은 모듈 번들러이다. 브라우저가 이해할 수 있도록 리액트 코드로 변경해주는 역할을 한다.
모듈을 여러개로 나눠서 작업하면 코딩하기가 매우 편리하다. 하지만 많은 모듈을 남발할 경우 네트워크 낭비를 유발할 수 있다. 여러개의 파일을 묶어서 하나의 파일로 만든 뒤, 보낼 모듈 번들러가 필요하다.
웹팩에서는 자바스크립트 등 모든 것을 모듈로 본다. 하나의 파일로 보내서 로딩 속도가 매우 단축되었다.

• Entry : 웹팩에서 웹 자원을 변환하기 위한 첫번째 과정이다. entry로 모듈을 로딩하고 하나의 파일로 묶는다.
• Output : entry로 찾은 모듈을 하나로 묶은 결과물로 반환할 위치이다.
• Loader : 웹팩은 자바스크립트와 JSON만 빌드할 수 있어서 Loader에서 HTML, CSS, image를 빌드할 수 있게 도와준다.
• Plugin : 웹팩의 기본적인 동작 외 추가적인 기능을 제공한다. loader가 파일을 해석하고 변환하는 과정에 관여한다면 plugin은 결과물의 형태를 바꿔준다.

Babel

Babel은 자바스크립트 컴파일러이다. 입력과 출력 모두 자바스크립트 코드이다. 최신 자바스크립트 문법인 ES6문법을 babel이 브라우저가 이해할 수 있도록 ES5 문법을 변환해준다. 리액트를 일반 브라우저에서 실행할 수 있다.

리액트에서는 따로 설정하지 않고 create-react-app이라는 명령어로 기본 설정을 할 수 있다.
create-react-app

참조

Babel 이해하기
Webpack과 Babel을 이용한 React 개발 환경 구성하기