(JavaScript) 번들링과 빌드 시스템

bundler

웹서비스 규모가 커지면서 수백줄의 코드, 수십개의 JS파일을 읽어야 하면서 발생하는 문제점

1. 전역 범위를 파일의 중복 선언
2. 느린 로딩
3. 수동적인 웹 개발 루틴 작업 (파일, 이미지 압축 / CSS 전처리기 변환 등)

 

번들러(bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(번들) 도구를 의미합니다.

 

Webpack

프론트엔드 프레임워크에서 가정 대중적인 모듈 번들러. 

모듈: 웹 애플리케이션을 구성하는 특정 기능의 자원

JS 파일 뿐만 아니라 HTML, CSS, image,Font 등의 수십개의 파일을 하나의 JS파일로 압축, 축소

 

장점: 서버와 여러번 통신하지 않아도 됨. 로딩 속도 높아짐

 

transpile

최신 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시키는 과정

 

웹팩 안에 babel이라는 transpiler가 있다. 

 

Advanced

• Source Map이 무엇일까요?
• Webpack의 필수 요소엔 무엇이 있을까요?
• Webpack의 플러그인과 모듈은 어떤 역할들을 하나요?
• Hot Module Replacement에 대해 알아보세요.

Source Map

빌드용으로 배포된 파일과 원본 파일을 연결시켜주는 역할을 한다.

배포를 위해 파일을 압축한 상태에서 파일이 에러가 난다면 디버깅을 해야 한다.

source Map을 이용해 배포용 파일의 특정 부분이 원본 파일의 어느 부분인지를 확인시켜준다.

 

source Map 핸드북 보러가기 

 

 

Webpack 필수 요소

Entry, Output, Loader, Plugin, (devServer, source Map)

 

Webpack 필수 요소 설명 보러가기

 

 

Webpack Plugin의 역할

번들링된 결과물에 대해 추가로 적용할 수 있는 속성을 설정.

번들링된 JS파일에 대한 난독화(UglifyJsPlugin).

번들링된 css, html 파일에 주입하는 역할(html-webpack-plugin)

 

 

Webpack module의 역할

 

Hot Module Replacement

HMR은 브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정