웹팩의 빌드과정, CRA 커스터마이징

프론트엔드에서 사용되는 자원(HTML, CSS, JS, Image)들을 하나의 결과물로 만들어주는 모듈 번들러

웹팩의 번들링 과정

entry ⇒ loader ⇒ output ⇒ plugin

웹팩의 번들링을 시작하기 위한 최초의 진입점

웹팩은 entry에 import된 파일들을 타고 해당 파일들의 내용까지 모두 해석해준다.

웹팩 번들링이 끝나고 결과물이 위치하는 지점

[name], [id], [hash], [chunkhash] 와 같이 option을 대괄호로 감싸 filename 옵션으로 넣을 수 있다.

자바스크립트가 아닌 웹 자원(css, scss, typescript)들을 변환할 수 있도록 추가해준다.

loader는 rules에 배열로 넣어준다

test는 대상이 될 파일 유형을 정규표현식을 사용

use는 적용할 loader들을 배열로 넣어줄 수 있다.

use에 들어간 loader들은 배열의 뒤부터 앞으로 순서대로 실행이 되어 순서가 중요하다.

sass를 사용할 시에는 sass-loader, css-loader, style-loader 순으로 실행이 되야하고

sass-loader는 sass/scss를 해석하여 css로 만들고

css-loader는 css를 해석하고 하여 자바스크립트가 읽을 수 있는 string형태로 반환한다.

style-loader는 해석된 css를 document head의 style태그로 넣어 cssom을 구성할 수 있도록 해준다.

웹팩이 빌드하고 난 결과물에 추가적인 동작을 통해 기능을 추가해준다.

react를 빌드할때 필요한 패키지(웹팩, 테스팅라이브러리 ..)들을 하나로 묶어서 웹팩으로 세세하게 설정할 필요없이 간단히 개발환경을 구성할 수 있게 해주는 템플릿이다.

CRA에서 더 필요한 기능을 추가하거나 셋팅을 바꾸고 싶다면 eject를 해서 설정을 바꾸야하지만 숨어있던 파일들이 나와 폴더구조가 복잡해지고, 한번 eject후에는 이전 상태로 되돌릴 수 없다.

이처럼 CRA를 eject없이 추가로 기능을 넣고 싶거나 쓰고 싶지않은 기능이 있을때 react-app-rewired, craco를 사용해서 CRA설정을 override 한다.

craco 설정법과 typescript 절대경로 설정

react-app-wired 사용법과 절대경로 지정

두가지 방법을 모두 써본 느낌으로는 react-app-wird가 더 기본 플러그인이나, babel webpack 플러그인이 잘 먹는 느낌이라서 이후 사용한다면 react-app-wired만 사용할 것 같다.

참고