그동안 CRA(create-react-app)로만 리액트를 사용해왔습니다.
그래서 웹팩의 존재만 알고 있었지, 깊게 들여다 본 적은 없었습니다.
웹팩을 공부하기에 앞서 npm에 대해 살짝 짚고 넘어가려고 합니다.
npm?
npm은 명령어로 라이브러리를 설치하고 관리할 수 있는 패키지 매니저입니다.
npm 덕분에 개발에 필요한 자바스크립트 라이브러리를 손쉽게 다운로드 받을 수 있습니다.
install
가장 빈번하게 사용되는 명령어입니다.
기본적인 명령어 사용법은 다음과 같습니다.
npm i vue
npm i vue --save-prod (위와 동일)전역 설치
npm i <라이브러리명> -g전역설치는 프로젝트 레벨에서 사용할 라이브러리를 불러올 때 사용하는 것이 아니라 시스템 레벨에서 사용할 라이브러리를 불러올 때 사용합니다.
라이브러리를 전역 설치 하면 mac의 경우에는 '/usr/local/lib/node_modules' 경로에 위치하게 됩니다.
지역 설치
라이브러리를 지역 설치하면 현재 위치한 디렉토리에 node_modules 폴더가 생성됩니다.
node_modules에는 지역 설치한 라이브러리들이 담깁니다.
지역 설치 옵션은 2가지가 있습니다.
바로 배포용(dependencies)과 개발용(devDependencies) 옵션입니다.
package.json 파일을 열어 보면 이 두 옵션을 확인할 수 있습니다.
// ✅ 배포용
npm i vue
// ✅ 개발용
npm i vue -D
npm i vue --save-dev두 옵션의 차이점은 다음과 같습니다
- devDependencies: 개발 과정을 보조하기 위한 라이브러리 모음
- dependencies: 애플리케이션의 동작/로직과 관련 있는 라이브러리 모음
이 두 옵션을 구분해야 하는 이유는 프로젝트 빌드 시간이 길어질 수 있기 때문입니다.
기본적으로 devDependencies에 포함된 라이브러리는 build 단계에 반영되지 않습니다.
하지만 devDependencies에 포함되어야 할 라이브러리가 dependencies로 분류된다면 프로젝트 빌드 시간이 불필요하게 길어지는 문제가 발생합니다.
