첫 팀 프로젝트를 시작하면서 프로젝트 성향에 맞는 커스텀한 개발 환경 설정이 필요했습니다!
직접 개발 환경을 구성해 보면서 전반적인 개발 환경에 대해 이해하고자 합니다.
그 첫 주제는 바로 webpack입니다.
1. webpack 이란?
웹팩은 대표적인 *번들러중 하나로
웹을 구성하는 자원을 각각의 모듈로 취급하고 이를 병합하여 하나의 결과물로 만들어 주는 도구입니다.
(js 파일 뿐만 아니라 css, 이미지, 폰트와 같은 기타 파일도 모듈로 취급할 수 있습니다.)
*번들러(bundler): 의존성이 있는 여러 개의 js파일(모듈)을 하나의 js파일로 합쳐주는 도구
2. webpack의 핵심 컨셉
웹팩 공식문서에서는 웹팩을 이해하기 위한 핵심 컨셉을 소개하고 있습니다.
2-1. entry
entry 속성을 통해 번들링을 시작할 파일의 경로를 지정할 수 있습니다.
웹팩은 이 속성에 명시된 모듈에서부터 시작하여 각 모듈의 의존성 그래프를 생성하게 됩니다.
2-2. output
반대로 output 속성으로 번들링 된 결과물이 저장될 경로 및 파일명을 지정할 수 있습니다.
*path: node.js api로 파일의 경로를 지정하기 위해 사용
*path.resolve, __dirname : path.resolve, __dirname란?
2-3. loader
로더는 js파일 외의 파일들도 모듈로 취급할 수 있도록 합니다. 즉 번들링 결과물에 포함시킬 수 있습니다.
또한 특정 유형의 모듈을 변환할 수 있습니다. (ex. ts --> js 변환, babel로 코드 변환)
module 속성으로 설정합니다.
*로더는 역순으로 실행됨에 유의
*예시에서 사용한 로더
- css-loader: css파일을 js코드로 변환(모듈화)해 주는 로더
- style-loader: js로 변경된 css를 동적으로 돔에 추가해 주는 로더
2-4. plugin
플러그인은 번들링된 결과물의 후처리를 담당합니다.
이외에도 에셋 관리, 환경변수 주입 등, 번들링 과정 전반에 걸쳐 여러가지 기능을 합니다.
plugins 속성으로 설정합니다.
*예시에서 사용한 플러그인
- HtmlWebpackPlugin: HTML 파일을 생성하고, 번들 파일을 script 태그로 주입해주는 플러그인
2-5. mode
모드 속성으로 webpack에 내장된 환경별 최적화를 활성화 할 수 있습니다.
옵션은 'development', 'production', 'none' 이 있습니다.
기본적으로 각 모드별로 process.env.NODE_ENV 환경 변수가 자동으로 설정됩니다.
또한 'production' 모드에서는 최적화와 관련된 여러 플러그인이 적용됩니다.
3. 번들링 / 결과물 확인
핵심 컨셉을 바탕으로 작성한 설정파일로 아래의 간단한 예시코드를 번들링 해보겠습니다.
2개의 모듈에 의존하고 있는 index.js를 준비했습니다.
결과물을 확인해보면...
webpack은
entry 경로로 지정한 index.js 파일로 부터 의존성을 분석하여
output 경로에 맞게 번들 파일이 생성되었고,
loader가 잘 적용되어 css코드도 번들에 합쳐졌습니다.
plugin도 잘 동작하여 html 파일 및 삽입된 script태그를 확인할 수 있습니다.
4. 마치며...
여기까지 webpack의 핵심 컨셉에 대해 알아보았습니다.
webpack에는 위에서 소개한 속성 외에도 수 많은 속성과 세부 속성이 있습니다...!
필요할 때 마다 그때그때 공식문서로 학습하는게 좋아보이네요!
시간을 두고 천천히 알아가보도록 합시다.
'개발 환경' 카테고리의 다른 글
| TS + React + webpack 기반의 개발 환경 구성(feat. loader, HMR) (6) | 2023.07.25 |
|---|---|
| path.resolve, __dirname (0) | 2023.07.14 |