webpack과 babel (feat. CRA)

webpack 

• 여러 개의 파일을 하나로 합쳐주는 모듈 번들러
• 기능
  • css loader 기능
  • jsx 변환 작업
  • 여러 개로 나눠진 js 파일을 html이 실행 할 수 있는 하나의 js파일로 합쳐줌
  • 파일 분할(Code Splitting)
    1. 애플리케이션 번들에 포함된 코드를 여러 개의 조각/청크 로 분할하는 기술
    2. 초기 로딩 시 필요한 최소한의 코드만 다운로드 하여 페이지 로딩 속도 향상
    3. 대규모 애플리케이션에 유용
    4. 리액트 라우터와 같은 라이브러리와 잘 통합되어 있어, 각 페이지에 필요한 코드만 로딩하게 도와줌

// 동적 import() - 모듈은 필요할 때만 로딩되며 웹팩은 이를 감지하여 해당 모듈을 별도의 청크로 분할
const someModule = import('./someModule.js');

// 웹팩의 SplitChunksPlugin - chunk간 중복 코드 줄여줌

// 웹팩의 magic comments - 주석을 사용하여 특정 모듈을 새로운 청크로 분할하도록 웹팩에 알려주기
import(/* webpackChunkName: "my-chunk" */ './myModule.js');

Babel

• avaScript 코드를 변환하는 도구로 트랜스파일러라고 불림
• 트랜스파일러 - 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것
• 모든 브라우저가 최신 문법에 호환되는 것이 아니기 때문에 동작을 보장하기 위해 es5 코드로 변환 시키는 과정 필요
• 기능 
  • ES 변환 - 최신 자바스크립트 코드를 하위 버전으로 변경 (모든 브라우저에서의 호환 보장)
  • JSX 변환 - 리액트와 같은 라이브러리에서의 JSX 문법을 JS로 변환 해줌 - 브라우저는 jsx 코드를 이해하지 못하니까
  • 환경 대응 - node.js환경에서 실행되는 코드와 브라우저에서 실행되는 코드는 일부 차이가 있을 수 있어서
  • 플러그인과 프리셋 - 필요한 변환 규칙을 커스터마이징 하기 위함

npm init

npm i -D webpack webpack-cli  //-D는 개발환경에서만 쓰인다는 것

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

 

React 

• CRA를 통해 리액트 애플리케이션을 초기화 했다면, 웹팩과 바벨 설정은 자동으로 관리 되기 때문에 별도로 해당 패키지들을 설치 할 필요 없음
• CRA 와 같은 도구는 초기 설정을 추상화 하여 개발자가 더 빠르게 개발 하도록 도와줌
  1. 개발 서버 실행 시 
     • "npm run start" 와 같은 명령을 통해 서버를 실행할 때 CRA는 webpack 개발 서버를 활용 함.
     • 이 때, 웹팩은 코드의 변경을 감지하고 자동으로 다시 빌드하여 브라우저에 반영 됨
  2. 빌드 시 
     • "npm run build" 와 같은 명령을 사용하여 production 빌드를 생성할 때, CRA는 웹팩을 사용하여 최적화 된 번들 파일을 생성함
     • 이때 바벨은 jsx를 js로 트랜스 파일
  3. 테스트 시
     • npm test 명령으로 테스트 실행 시, jest를 통해 유닛/통합 테스트가 이뤄지며 jest는 내부적으로 바벨을 사용하여 테스트 코드 실행 함
  4. 코드 변경 감지 및 실시간 리로딩
     • 개발 중에 코드를 수정하면 CRA는 서버가 해당 변경을 감지하고 웹팩과 바벨을 사용하여 빠르게 다시 빌드해서 브라우저에 적용 됨. 
     • 빠른 개발 사이클 제공에 도움 됨
• 만약 CRA대신 직접 리액트를 설정할려면 위의 명령어들을 통해 직접 설치해주고 수동으로 설정해줘야 함

 

 

 

-참고 사이트

https://velog.io/@dbsbest10/Webpack-%EA%B3%BC-Babel%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

Webpack 과 Babel이란 무엇일까?