bundler
웹서비스 규모가 커지면서 수백줄의 코드, 수십개의 JS파일을 읽어야 하면서 발생하는 문제점
- 전역 범위를 파일의 중복 선언
- 느린 로딩
- 수동적인 웹 개발 루틴 작업 (파일, 이미지 압축 / CSS 전처리기 변환 등)
번들러(bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(번들) 도구를 의미합니다.
Webpack
프론트엔드 프레임워크에서 가정 대중적인 모듈 번들러.
모듈: 웹 애플리케이션을 구성하는 특정 기능의 자원
JS 파일 뿐만 아니라 HTML, CSS, image,Font 등의 수십개의 파일을 하나의 JS파일로 압축, 축소
장점: 서버와 여러번 통신하지 않아도 됨. 로딩 속도 높아짐
transpile
최신 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시키는 과정
웹팩 안에 babel이라는 transpiler가 있다.
Advanced
- Source Map이 무엇일까요?
- Webpack의 필수 요소엔 무엇이 있을까요?
- Webpack의 플러그인과 모듈은 어떤 역할들을 하나요?
- Hot Module Replacement에 대해 알아보세요.
Source Map
빌드용으로 배포된 파일과 원본 파일을 연결시켜주는 역할을 한다.
배포를 위해 파일을 압축한 상태에서 파일이 에러가 난다면 디버깅을 해야 한다.
source Map을 이용해 배포용 파일의 특정 부분이 원본 파일의 어느 부분인지를 확인시켜준다.
Webpack 필수 요소
Entry, Output, Loader, Plugin, (devServer, source Map)
Webpack Plugin의 역할
번들링된 결과물에 대해 추가로 적용할 수 있는 속성을 설정.
번들링된 JS파일에 대한 난독화(UglifyJsPlugin).
번들링된 css, html 파일에 주입하는 역할(html-webpack-plugin)
Webpack module의 역할
Hot Module Replacement
HMR은 브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정
