Webpack

1. NPM(Node Package Manager)

  > NPM은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자로 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있다. NPM은 Node.js를 설치하면 같이 설치된다.

  > Node.js는 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도 소프트웨어 없이 자바스크립트를 실행할 수 소프트웨어 플랫폼이다.

  > NPM 장점

    1) package.json을 통해 라이브러리와 의존성을 관리한다.

    2) 라이브러리를 편리하게 설치할 수 있다.

명령어	내용
node -v npm -v	node 버전 확인 npm 버전 확인 > 실행이 안될 경우 Select Default Shell 변경
npm init -y	초기화(기본값으로 package.json 생성)
npm install jquery	NPM 지역 설치 (node_modules 폴더 하위 jquery 라이브러리 생성)
npm install gulp --global(-g)	NPM 전역 설치 (node_modules 폴더 하위 gulp 라이브러리 미생성)
NPM 지역 설치 VS NPM 전역 설치
npm uninstall gulp	gulp 라이브러리 삭제
npm i jquery --save-prod (default) npm i jquery --save-dev (npm i jquery -D)	package.json > dependencies package.json > devDependencies
dependencies : 애플리케이션 로직과 연관이 있는 라이브러리 devDependencies : 개발 보조 라이브러리(최종 배포 시 devDependencies 라이브러리는 포함되지 않는다.)

 

2. Webpack

  > Webpack은 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 모듈 번들러이다. Webpack에서 모듈이란 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다.

[웹팩의 주요 속성]

속성	설명
entry	웹팩으로 빌드(변환)할 대상 파일을 지정하는 속성입니다. entry로 지정한 파일의 내용에는 전체 애플리케이션 로직과 필요 라이브러리를 로딩하는 로직이 들어갑니다.
output	웹팩으로 빌드한 결과물의 위치와 파일 이름 등 세부 옵션을 설정하는 속성입니다.
loader	웹팩으로 빌드할 때 HTML, CSS, PNG(이미지) 파일 등을 자바스크립트로 변환하기 위해 필요한 설정을 정의하는 속성입니다.
plugin	웹팩으로 빌드하고 나온 결과물에 대해 추가 기능을 제공하는 속성입니다. 예를 들어, 결과물의 사이즈를 줄이거나 결과물(기본적으로 자바스크립트)을 기타 CSS, HTML 파일로 분리하는 기능 등이 있습니다.
resolve	웹팩으로 빌드할 때 해당 파일이 어떻게 해석되는지 정의하는 속성입니다. 예를 들어, 특정 라이브러리를 로딩할 때 버전은 어떤 걸로 하고, 파일 경로는 어디로 지정하는지 등을 정의합니다.

 

[참고자료]

Webpack from First Principles

Repository

[VSCode 플러그인 적용 방법]

  > window : ctrl + shift + p

  > mac : command + shift + p

 

Webpack Handbook