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