본 포스트는 프로 리액트: React.js를 이용한 모던 프런트엔드 구축의 부록A - 웹팩을 공부하며 정리한 글 입니다. 문제시 삭제하도록 하겠습니다. 도서에 포함된 칸반 앱의 소스 코드들이 이전 버전의 리액트로 작성되어 있어서, 그대로 따라서 타이핑 하면 수없이 많은 에러들과 부딪힐 수 있습니다. 우리말로 된 리액트 서적이 없다는 점을 감안하더라도 프로 리액트는 리액트를 처음 접하는 입장에서 굉장히 많은 도움이 되는 책입니다. 새롭게 바뀐 리액트 환경에서 칸반 앱을 동작하게 만드는 재미도 쏠쏠합니다. 리액트를 처음 접하는 개발자라면 한번쯤 처음부터 끝까지 찬찬히 일독하기를 조심스레 권해봅니다.
웹팩?!
웹팩은 프로젝트의 구조를 분석하여, 프로젝트에 포함된 모듈과 자바스크립트 파일을 번들로 묶고 패킹하는 모듈 번들러(module bundler)이다. 웹팩은 메인 파일에서 부터 프로젝트의 구조를 분석하는데, require와 import 키워드를 참고해서 프로젝트의 모든 의존성을 조사한다. 로더를 이용해서 각 소스 파일을 처리하고, 프로젝트의 자바스크립트 모듈을 번들로 묶은 자바스크립트 파일을 생성한다. 일반적으로 하나의 파일로 떨군다.
웹팩 설치 및 실행
웹팩을 사용하기 위해서 가장 먼저 비어있는 디렉토리에서 npm init으로 초기화 시켜주고, 웹팩을 설치한다. 이미 package.json 으로 의존성을 관리하고 있다면 npm init 은 생략해도 무방하다.1
$ npm init && npm install --save-dev webpack
설치된 웹팩은 다음과 같은 형태로 사용한다.
1 | $ node_modules/.bin/webpack {최상위 파일} {최종 번들 파일} |
아무런 오류 없이 bundle.js 이 생성되었다면 성공적으로 번들링이 수행된 것이다.