/understanding-webpack-and-babel

Primary LanguageJavaScript

Understanding webpack and babel

Setup

  1. 이 저장소를 클론합니다.
$ git clone https://github.com/dev-allenk/understanding-webpack-and-babel.git
  1. 패키지를 설치합니다.
$ yarn install

Instruction

  • 시작하기 전에 말씀드리고 싶은 것은, 결국 웹팩이든지 바벨이든지 그 결과물은 브라우저가 이해할 수 있는 파일 이어야한다는 점입니다.
  • 즉, ts, tsx, jsx 등의 파일은 js로 바꿔주어야하고, 그 js 파일은 결국 바닐라 자바스크립트라는 말이지요.

파일 상황

  1. 현재 src 폴더에는 App.jsx, component.js, index.jsx 파일이 존재합니다.
  2. 웹팩은 index.jsx를 entry로 삼고, 해당 파일이 의존하고 있는(=import하고 있는) 파일을 모아서 1개의 번들파일로 만듭니다.
  3. 번들링 과정에서 babel-loader를 거치도록 webpack.config.js 를 설정했습니다. 이 과정에서 es6이후의 문법은 es5로 변경됩니다. jsx문법도 js문법으로 변경됩니다.
  4. 즉, 웹팩의 결과물은 es5문법으로 작성된 1개의 js파일입니다.(다시 말하지만 바닐라 자바스크립트입니다.)

바벨의 결과물 확인해보기

  1. 웹팩은 나누어진 모듈 파일 각각에 대해 바벨을 먼저 돌리고, 바벨로 변환된 파일을 1개의 파일로 번들링합니다.
  2. 우리가 작성한 파일이 바벨로 변환되었을 때(번들링하기 이전에) 어떤 모습일지 확인해봅시다.
  3. component.js파일은 변환해도 큰 변화가 없으니 생략해도 됩니다만 혹시 궁금한 경우 아래 명령어를 입력합니다. 결과물은 babel폴더에서 찾을 수 있습니다.
$ npx babel ./src/component.js --out-file ./babel/transpiled-component.js
  1. 리액트 코드를 변환하면 어떤 결과물이 나오는지 확인해봅시다. 아래 명령어를 입력하고 babel 폴더에서 결과물을 확인합니다.
$ npx babel ./src/App.jsx --out-file ./babel/transpiled-App.js
  1. jsx문법으로 작성한 파일이 평범한 js 파일로 바뀐것을 확인할 수 있습니다. 이 결과물은 웹팩의 결과물과 비교할 예정이니 지우지말고 그대로 두도록 합니다.

웹팩의 결과물 확인해보기

  1. index.jsx에서 바닐라 코드가 주석 해제된 상태에서 웹팩을 실행해봅시다.
$ npx webpack

  1. 결과물이 dist 폴더안에 나타납니다.

  2. 라인 89번 정도 이후의 코드를 살펴보면 component.js의 내용과 index.jsx의 내용을 확인 할 수 있습니다.

  3. 웹팩은 분리되어 있는 파일을 하나로 합쳐주는 역할임을 알 수 있습니다.

  4. 이번에는 index.jsx에서 바닐라 코드를 주석처리하고 리액트 코드가 주석 해제된 상태에서 웹팩을 실행해봅시다.

$ npx webpack

  1. 약 28604라인에 App.jsx에 작성한 코드가 등장하는 것을 확인할 수 있습니다.(커맨드+f로 'App.jsx'를 검색하면 찾기 쉽습니다.)

  2. 여기에 존재하는 코드를 아까 바벨로 변환한 결과물과 비교해봅시다. App함수가 매우 비슷한 것을 확인할 수 있습니다. 특히, createElement라는 메서드를 실행하는 부분과, 인자로 넣어주는 값이 같은것을 확인할 수 있습니다.

  3. 즉 웹팩은, 바벨의 결과물을 받아서 하나로 묶어주는 역할을 한다는 것을 알 수 있습니다.