12. Webpack 빌드 도구
빌드 도구 (or Bundler)
12.1 Webpack의 역할
자바 스크립트 파일을 최적화하여 적은 수의 파일로 사용자 요청을 처리하는 것
서버 부담 감소, 페이지 렌더링 시간 감소
- 모든 의존 모듈을 올바른 순서로 불러오도록 한다.
- 모든 의존 모듈을 한 번씩만 불러오도록 한다.
- 자바스크립트 파일이 가능한 한 적은 파일로 묶여지도록 한다.(이것을 정적 자원 이라고 부른다.)
12.2 프로젝트에 Webpack 적용하기
- 설치하고
- 의존 모듈에 설치하고 package.json에 저장한 다음
- webpack.config.js로 Webpack 설정하고
- 개발 서버(webpack-dev-server)와 핫 모듈 대체 설정
12.2.1 Webpack과 의존 모듈 설치
[ 필요 모듈 ]
- Webpack : 번들러 도구
- 로더 : 스타일, css, 핫 모듈 대체, babel 및 jsx 전처리기
- Webpack 개발 서버 : Express 기반의 개발 서버로 HMR 기능을 사용할 수 있음.
12.2.2 Webpack 설정
Webpack이 처리할 대상과 로더를 이용한 처리 방법을 전달 받아야 함.
이를 webpack.config.js 파일이 해 줌.
- JSX 파일 자바스크립트 파일로 변환 ; babel-loader, babel-core, babel-preset-react
- css-loader를 이용해 require로 css를 불러오고, url과 imports 처리
- style-loader를 이용해 css를