번들링
여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위.
프론트엔드 개발자에게 번들은 "사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음"이다.
번들링의 필요성
- 두개의 js 파일에서 같은 변수를 사용하고 있어서, 변수간 충돌이 일어날 때
- 딱 한 번 불러오는 코드의 크기가 비교적 클 때, 인터넷 속도가 느린 환경의 사용자가 불편을 호소할 때
- 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 떨어져 코딩하기가 어려울 때
- 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 애플리케이션을 임의로 조작이 가능할 때
위의 경우 번들링이 필요하다.
웹팩(Webpack)
웹팩은 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다.
웹팩은 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다.
빌드와 번들링
빌드는 개발이 완료된 앱을 배포하기 위해 하나의 폴더(directory)로 구성하여 준비하는 작업을 말한다. React 앱을 기준으로 설명을 하면, npm run build를 실행하면 React build 작업이 진행되고, index.html 파일에 압축되어 배포에 최적화된 상태를 제공해 준다.
웹팩의 핵심개념
-
Entry
엔트리 포인트는 webpack이 내부의 디펜던시 그래프를 생성하기 위하여 사용해야하는 모듈이다. Webpack은 엔트리 포인트가 의존하는 다른 모듈과 라이브러리를 찾아낸다. -
Output
Output 속성은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 한다. -
Loaders
webpack은 기본적으로 JavaScript와 JSON 파일만 이해한다. 로더를 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가한다. -
Plugins
로더는 특정 유형의 모듈을 변환하는 데 사용되지만 플러그인을 활용하여 번들을 최적화하거나 에셋을 관리하고 또 환경변수 주입 등과 같은 광범위한 작업을 수행할 수 있다. -
Mode
mode 파라미터를 development, production 또는 none으로 설정하면 webpack에 내장된 환경별 최적화를 활성화 할 수 있다. 기본값은 production이다. -
Browser Compatibility
Webpack은 ES5가 호환되는 모든 브라우저를 지원한다(IE8 이하는 지원되지 않는다).
