Webpack Introduction

Webpack
- 모듈의 정의
  - 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태
  - 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위.
  - 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 된다.
- 모듈 번들링 (== 빌드, 변환, 번들링)
  - Web Application을 구성하는 자원(HTML, CSS, JS, ...)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구
- 웹팩이란
  - 최신 frontend framework에서 가장 많이 사용되는 모듈 번들러
- 웹팩에서의 모듈
  - 웹팩에서 지칭하는 모듈이라는 개념은 자바스크립트 모듈에만 국한되지 않고, WEB Application을 구성하는 모든 자원을 의미
  - WebApplication을 제작하려면, HTML, CSS, JS, Img, Font, 등 많은 파일이 필요한데, 이 파일하나하나를 모두 모듈이라고 한다.
- 모듈의 종류
  - Built-in Core Module (내장된 모듈, Node.js module)
    'path': 파일의 경로를 자유롭게 다룰 수 있도록함
  - Community-based Module (예: npm, ESM)
    npm CLI를 사용해야함
  - Local Module (MathUtil(로컬환경에서 만든 모듈))
    특정 프로젝트에 적용된 모듈
Webpack등장배경
- 파일단위의 자바스크립트 모듈 관리의 필요성
  - 파일단위로 변수를 관리해야할 필요성,
  - 예전에는 Common.js, AMD과 같은 라이브러리로 풀어왔다.
- 웹 개발 작업 자동화도구
  - HTML,CSS, JS 압축
  - 이미지 압축
  - CSS 전처리기 변환
  - Grunt, Gulp같은 도구를 사용
- Web Application의 빠른 로딩 속도와 높은 성능
  - 브라우저에서 서버로 요청하는 파일의 숫자를 줄이기 (웹 태스크 매니저를 이용해 파일 압축 및 병합)
  - Lazy Loading: 초기 페이지 로딩속도를 높이기 위해, 나중에 필요한 자원들은 나중에 요청.
  - 웹팩의 기본철학: 필요한 자원은 미리 로딩하는게 아니라, 그때 그때 요청하자.
웹팩으로 해결하고자 하는 문제
- 자바스크립트 변수 유효범위
  - ES6 Moules 문법과 웹팩의 모듈번들링으로 해결
- 브라우저별 HTTP 요청 숫자의 제약
  - HTTP 요청 숫자를 줄임으로써, Web Application의 성능을 높여줄 뿐만아니라, 사용자가 사이트를 조작하는 시간을 앞당길 수 있음.
  - 또한 웹팩을 이용해 여러개의 파일을 하나로 합치면, 브라우저별 HTTP 요청 숫자 제약을 피할 수 있다.
- 사용하지 않는 코드의 관리
- Dynamic Loading & Lazy Loading 미지원
  - Code Splitting기능을 이용하여 원하는 모듈을 원하는 타이밍에 로딩할 수 있다.
정리
- 모듈을 사용한다면
  - 코드의 재사용성 증가
  - 코드의 관리가 편해진다.(모듈을 통해 기능을 찾는 시간 단축)
  - 코드를 모듈화하는 기준이 명확해야한다.
- bundle
  - Web Apllication을 구성하는 모듈(HTML, CSS, JS, Image, ...)을 이를 조합해서 하나의 파일로 만들어냄
  - 서로 참조 관계에 있는 모듈들을 모아서, 하나의 파일로 묶는 것.
  - 모듈의 의존성은 안전하게 유지하면서, 하나의 파일로 만드는 과정
  - 중요한 이유
    모든 모듈을 로드하기 위한 시간이 단축됨
    사용하지 않는 코드를 제거해준다.
    참조되어지는 코드만 남기 때문
    파일 크기가 감소됨.(리소스를 빨리 불러옴. 렌더트리를 더 짧게, 사용자에게 접근 더 빠르게)
    파일의 크기를 줄여준다.

ToC