웹팩(Webpack)은 웹 개발에서 널리 사용되는 정적 모듈 번들러입니다
정적 모듈 번들러?
프로젝트가 작을때는 필요없을 수 있습니다 정적파일에 대한 관리 어려움이 없기때문. 하지만 프로젝트가 점점 고도화되고 커질수록 정적파일에대한 관리가 아주 지옥같아진다 경험해 본 분들은 해당 문제에 대해서 공감과 고민을 안 할 수가 없는 부분인것 같습니다. 정적 모듈 번들러는 정적 모듈들을 번들링해준다. 쉽게말해 webpack은 정적 모듈들을 한번에 관리 할 수 있는 것에 초점이 맞춰진 프로젝트이다.
. 웹 애플리케이션을 구성하는 자바스크립트, CSS, 이미지와 같은 다양한 자산(assets)을 모아 하나 또는 여러 개의 번들로 결합하고 최적화하는 도구입니다. 웹팩의 주요 목표는 웹 사이트의 로딩 시간을 줄이기 위해 필요한 자원들을 효율적으로 관리하고 서비스하기 위한 것입니다. 웹팩은 아래와 같은 기본 개념을 중심으로 동작합니다:
- 엔트리(Entry): 웹팩이 애플리케이션의 의존성 그래프를 생성하기 시작하는 지점입니다. 일반적으로 주요 JavaScript 파일이 엔트리 포인트로 지정됩니다. 이 파일은 웹팩에게 어떤 모듈을 사용하고 빌드해야 하는지 알려줍니다.
- 출력(Output): 웹팩이 생성한 번들의 저장 위치를 정의합니다. 출력 설정을 통해 번들의 이름과 저장될 경로를 지정할 수 있습니다.
- 엔트리에서 설정한 파일을 번들링한 결과물을 어떻게 정리할것인지 설정할 수 있다.
- 로더(Loader): 웹팩은 오직 JavaScript와 JSON 파일만 이해할 수 있기 때문에, 로더를 사용하여 다른 유형의 파일들(CSS, 이미지, SASS 등)을 처리하고, 이들을 웹팩이 이해할 수 있는 모듈로 변환합니다.
- 웹팩에 핵심, 로더를 얼마나 잘 사용하냐에 따라서 웹팩에 실력이 갈린다고 합니다.
- 웹팩을 사용함으로써 개발자는 애플리케이션의 성능을 향상시킬 수 있으며, 코드 분할, 지연 로딩 같은 고급 기능을 사용하여 리소스를 효율적으로 로드할 수 있습니다. 이러한 이유로 웹팩은 현대 웹 개발의 핵심 도구 중 하나로 간주됩니다.
- 플러그인(Plugin): 로더가 파일을 변환하는 동안, 플러그인은 번들 최적화, 자산 관리, 환경 변수 주입과 같은 광범위한 작업을 처리합니다. 플러그인을 사용하면 번들 생성 과정을 광범위하게 커스터마이징할 수 있습니다.
- 모드(Mode): 웹팩은 development, production, none의 세 가지 모드를 제공합니다. 각 모드는 기본 최적화 수준을 다르게 설정하여, 개발 중에는 더 빠른 빌드 속도를, 프로덕션에서는 더 낮은 파일 크기와 성능 향상을 제공합니다.
- 직접 작업을 해보면 번들링된 파일이 production일때는 개발자가 알아보기 힘들게 번들링되어 나오나 성능이나 용량적인 측면에서 최적화된 번들링파일이 나오고 development모드일때는 번들링파일을 개발자가 읽을 수 있는 형태로 나와서 수정하기 좋게 나온다.