웹팩

HTML, CSS, JavaScript, Images, Font 이 파일들 모두가 모듈이다.
빌드, 번들링, 변환 모두 같은 의미.

웹팩의 필요성
1. 파일 단위의 자바스크립트 모듈 관리의 필요성
2. 웹 개발 작업 자동화 도구(Web Task Manager)
3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

웹팩으로 해결 하려는 4가지 문제점
1. 자바스크립트 변수 유효 범위
2. 브라우저별 HTTP 요청 숫자의 제약
3. 사용하지 않는 코드의 관리
4. Dynamic Loading & Lazy Loading 미지원
→ 변수의 유효 범위 문제점을 모듈문법과 웹팩의 모듈번들링으로 해결, 브라우저별 HTTP요청 수 제약이 있음. 웹팩을 이용해 여러개의 파일을 하나로 합치면 요청 숫자 제약을 피할 수 있음, 웹팩의 Code Splitting 기능을 이용하여 원하는 모듈을 원하는 타이밍에 로딩 할 수 있음

Node.js와 NPM

Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미한다.(Node.js전에는 브라우저의 동작을 제어하는데만 국한.)
NPM(Node Package Manager) 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저
npm init -y: 초기화 package.json생성.

// package.json
{
  "dependencies": {
    "jquery": "^3.4.1"
  }
} // npm i jquery(배포용) 
{
  "devDependencies": {
    "jquery": "^3.4.1"
  }
} // npm i jquery -D(개발용)

-D 로 설치하면 배포할때 코드에서 제외됨.
빠져도 괜찮은 라이브러리의 예시
- webpack
- eslint
- imagemin

웹팩

4가지 속성

• entry
• output
• loader
• plugin

entry: 웹팩에서 웹자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로.

output: 웹팩을 돌리고 난 결과물의 파일 경로 .

loader: 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트) 들을 변환할 수 있도록 도와주는 속성.

plugin: 웹팩의 기본적인 동작에 추가적인 기능을 제공. 로더는 파일을 해석하고 변환하는 과정에 관여한다면 플러그인은 결과물의 형태를 바꾸는 역할