[#. React] Webpack이란? CRA로 시작한 React 프로젝트에 숨겨져 있던 Webpack 설정 파일 확인하기

 

 

 

 

그동안 React 프로젝트를 진행했을 때 CRA(create-react-app)로 시작했기 때문에 Webpack 설정에 대해

들여다볼 일이 없었다

 

 

Webpack

모던 Javascript 애플리케이션을 위해 사용되는 정적 모듈 번들러

웹팩에서는 Javascript, 스타일시트, 이미지 등을 모듈로 보는데 번들러는 여러 패키지와 관련된 파일들을 하나로 묶어주는 도구

 

 

 

 

Webpack 속성

 

Entry

Output

Loader

Plugins

Mode

 

 

 

1. Entry

웹 자원을 변환하기 위해 필요한 시작점, Javascript 파일 경로

entry를 통해 모듈을 로딩하고 하나의 파일로 묶는다

 

 

2. Output

entry를 통해 로딩한 모듈을 하나의 파일로 묶은 결과물을 반환할 위치

 

 

3. Loader

번들링할 파일에 대한 규칙을 정하고 실행하는 역할을 담당

웹팩은 기본적으로 Javascript와 JSON 만 빌드 가능한데, Javascript가 아닌 다른 자원 (HTML, CSS, Image)를 빌드할 수 있도록 도와주는 속성

또한, (TypeScript 같은) 다른 언어를 Javascript로 변경

 

 

4. Plugins

기본적인 동작 외 추가적인 기능을 제공하는 속성

번들 최적화, 환경 변수 주입과 같은 작업들을 수행

loader는 파일을 해석하고 변환하는 과정에 관여하고, plugin은 결과물의 형태를 바꾸는 역할을 한다

 

 

5. Mode

웹팩을 구동시킬 mode 지정 가능 

development, production, none 각각의 설정에 따라 웹팩의 내장된 최적화를 어떤 방식으로 할지 지정할 수 있다

 

 

 

 

기존 CRA(create-react-app) 프로젝트에서 Webpack 설정 확인하기

 

① CRA로 프로젝트 생성

 

npx create-react-app react-example

 

 

 

② 설정파일 추출하는 명령어 실행

 

npm run eject

Are you sure you want to eject? This action is permanent. > `Y` 선택

 

 

이렇게 숨겨져 있던 config 폴더와 scripts 폴더가 보이고, package.json 파일에 모든 dependency 와 babel, jest 설정 코드가 드러난다

 

 

 

 

 

 

 

 

 

 

 

참고 사이트

paulallies.medium.com/webpack-managing-javascript-and-css-dependencies-3b4913f49c58

Webpack: Managing JavaScript and CSS Dependencies