webpack은 모던 JavaScript 애플리케이션을 위한 모듈 번들러입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이들을 조합해서 하나의 결과물로 만드는 도구입니다.
webpack 핵심 개념
- Entry (엔트리)
- Output (출력)
- Loaders (로더)
- Plugins (플러그인)
프론트엔드 개발에 노드JS 가 필요한 이유
- SASS, 웹팩, 바벨 등의 기능이 노드 JS 기반에서 돌아갑니다.
- 빌드 자동화
** 웹팩을 설치하기까지의 여정 **
- Node.js 를 설치
- npm 을 설치 (Node.js 에 기본으로 포함)
- 웹팩을 설치
npm 프로젝트 생성
프로젝트 폴더 생성 : mkdir
Npm 프로젝트 생성 : npm init —> package.json 파일 생성
Npm 명령어 목록 확인 (npm --help)
Npm 명령어 만들어보기
npm 패키지 관리
리이브러리를 설치하는 방법에는 대표적으로 3가지가 있습니다.
- CDN — 간편하지만 파일을 제공하는 서버에 장애가 있을시 작동하지 않을 수 있습니다.
- 직접 다운로드 — 업그레이드 혹은 다운그레이드 버전관리를 수동으로 해줘야 합니다.
- npm 을 통한 의존성 관리 — 직접 다운로드와 버전관리의 장점을 모두 가집니다.
npm 라이브러리 설치
npm install <라이브러리 이름>
npm 의 버전 관리
npm 의 버전관리는 기본적으로 유의적 버전 관리 규칙을 따릅니다. (https://semver.org/lang/ko/)
메이저, 마이너, 패치 세가지를 각각 X.Y.Z의 형태로 표현합니다.
메이저 : 기존 버전과 호환되지 않게 api 가 바뀌는 경우
마이너 : 기존 버전과 호환되면서 새로운 기능이 추가된 경우
패치 : 기존 버전과 호환되면서 버그를 수정한 경우
범위 명시 법
- 틸더(tilde) : ~ 기호로 표시합니다. 마이너 버전이 명시가 되어있다면 패치버전을 갱신하고, 마이너 버전이 명시가 안되어 있다면 마이너 버전을 갱신합니다.
- 캐럿(Caret) : ^ 기호로 표시합니다. 마이너와 패치 버전을 갱신합니다. 정식버전이 0이라면 패치만 갱신합니다.
webpack의 탄생 배경
브라우저의 성능이 높아지고 자바스크립트 어플리케이션이 점점 고도화되면서 유지보수의 난이도가 높아졌습니다. 이를 해결하기 위해 자바스크립트를 기능 단위로 분리하여 사용하는 코드의 모듈화가 필요했습니다.
자바스크립트 모듈시스템의 등장 이전의 모듈패턴이 있었고 후에 es2015 이후 정식 지원하게된 모듈 시스템이 있습니다.
하지만 ie 계열 브라우저는 지원하지 않기 때문에 모든 브라우저 환경에서 이런 모듈 시스템을 사용할 수 있도록 만들어진 도구가 바로 웹팩.
웹팩은 여러가지 파일을 하나의 파일(번들)로 합쳐주는 번들러의 기능을 합니다.
webpack 설치
- 먼저 폴더를 만듭니다. 그 다음 npm을 초기화하고, webpack을 설치합니다.
npm install -D webpack webpack-cli
- Webpack 과 Webpack-cli 를 설치해야합니다.
- -D 옵션을 통해서 개발용 환경 구성. 이렇게 설치된 패키지들은 devDependencies 에 기록됩니다.