webpack 이해하기

웹팩 webpack

- 웹팩은 모듈 번들러(module bendler)이다.

 

모듈 번들러 module bendler 란?

-  웹 페이지를 구성하는 html, css, js, images etc... 모두 각각 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구

 

웹팩이 필요한 이유?

- 웹팩이 등장한 이유

1) 파일 단위의 자바스크립트 모듈관리 필요성

2) 웹 개발 작업 자동화 도구 (web task manager)

3) 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

 

1) 파일 단위의 자바스크립트 모듈관리 필요성

- 자바스크립트의 변수는 기본적으로 전역범위를 갖는다. 넓은 변수 범위를 갖기 때문에 어디에서도 접근하기 편리. but, 자바스크립트를 파일 단위로 관리하려는 경우, 변수명이 중복되어 의도치 않은 값을 할당할 수 있다.

=> 이러한 점을 보완 필요 (webpack전에는 AMD, Common.js 사용)

 

2) 웹 개발 작업 자동화 도구 (web task manager)

- 코드 수정뒤 저장하고 브라우저에서 새로고침을 눌러야 변경된 내용 볼 수 있다.

- 웹 서비스를 개발하고 배포시 html, css, js 등 파일을 압축하거나 변환해야 했다.

=> 이러한 일을 자동화 해주는 도구 필요 (Grunt, Gulp 도구 등장)

 

3) 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

- 웹 사이트 로딩 속도를 높이기 위해 파일을 압축하거나 병합 등 다양한 작업을 진행했다.

- 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원은 나중에 요청하는 레이지 로딩(Lazy Loading)이 등장했다.

=> 웹팩은 미리 로딩하지 않고 그때그때 필요한 자원을 요청한다.

 

웹팩을 사용하기 위해서는? => Node.js, NPM이 설치되어있어야 한다.

 

Node.js

-자바스크립트는 브라우저의 동작을 제어하고, 브라우저에서만 실행할 수 있었지만, Node.js는 자바스크립트를 브라우저 밖에서도 실행할 수 있는 환경이다.

*(node.js를 설치하면 npm은 같이 설치된다.)

 

NPM (node package manager)

- 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저이다.

 

- 명령어 사용해보기 / 흐름 이해하기

 

1. 새폴더를 만들고 해당 폴더에서 다음 명령어를 실행한다.

 

npm init -y

 

 

2. 명령어가 실행되면 `package.json` 파일이 생성된다. 

- 실제 애플리케이션을 만들때 아래와 같은 속성이 자주 사용된다.

(scripts, dependencies(배포용), devDependencies(개발용))

 

3. [npm 지역설치]

`package.json` 파일이 생성되면 이후 해당 프로젝트에서 사용할 자바스크립트 라이브러리를 설치하면 된다.

 

npm install jquery --save-prod 
= npm i jquery 
// 지역 명령어의 경우 --save-prod를 붙이지 않아도 된다.
// install 대신 i 사용 가능

 

3-1) 위 명령어로 라이브러리를 설치하면 해당 프로젝트에 `node_modules `폴더가 생긴다.

(폴더 하위에 해당 라이브러리 파일이 설치된 것을 확인 할 수 있다.)

3-2) `npm i jquery`는 `package.json`의 `dependencies`에 등록된다.

3-3) `npm i jquery -D`는 `package.json`의 `devDependencies`에 등록된다.

=> jquery와 같이 로직과 직접 관련된 라이브러리는 배포용(dependencies)으로 설치하는 것이 맞다.

 

4. [npm 전역설치]

npm 전역설치는 프로젝트에서 사용할 라이브러리가 아닌, 시스템 레벨에서 사용할 라이브러리를 설치할 때 사용한다.

 

npm install gulp --global 
//--global 대신 -g 사용 가능

 

- 라이브러리가 설치되고 나면 실행창에 해당 라이브러리 이름 입력시 명령어를 인식한다. (gulp)

 

5. 이렇게 설치된 배포용 라이브러리는 `npm run build` 명령어로 빌드하면 최종 애플리케이션 코드 안에 포함 된다.

(-D 옵션으로 설치한 라이브러리는 빌드 후 배포시 애플리케이션 코드에서 빠지게 되므로, 최종 애플리케이션에 포함되어야하는 라이브러리는 -D(개발용)으로 설치하면 안된다.)

+) -D (개발용) 으로 설치해도 되는 라이브러리 => webpack(빌드도구), eslint(코드 문법검사), imagemin(이미지압축)

 

 

---

 

웹팩이란? | 웹팩 핸드북

`캡틴판교`님 글을 읽고 정리한 글입니다. 👍