빌드 (Build):
빌드는 소스 코드와 다른 리소스들을 처리하여 실행 가능한 애플리케이션 또는 배포 가능한 형태로 변환하는 과정입니다. 개발자가 작성한 소스 코드와 필요한 리소스(이미지, CSS 파일, 데이터 파일 등)를 컴파일, 번들링, 최적화 등의 작업을 통해 실행 가능한 형태로 만들어줍니다. 빌드를 통해 애플리케이션의 성능을 향상시키고, 파일 크기를 줄이며, 애플리케이션의 배포 준비를 완료할 수 있습니다.(과정을 빌드라고 함)
모듈 (Module):
모듈은 소프트웨어 개발에서 재사용 가능한 독립적인 단위입니다. 모듈은 기능이나 작업을 수행하는 코드의 일부분으로 캡슐화됩니다. 각 모듈은 특정한 역할을 수행하며, 다른 모듈과 독립적으로 작동할 수 있습니다. 이러한 모듈화는 코드의 가독성, 재사용성, 유지보수성을 향상시키고, 개발 과정을 단순화합니다.(JS에서 모듈을 개념인가? 코드 조각의 개념이라는데..)
모듈 번들러 (Module Bundler):
모듈 번들러는 프론트엔드 개발에서 사용되는 다양한 모듈들을 하나의 번들로 묶어주는 도구(번들링)입니다. 모듈 번들러는 의존성 그래프를 분석하여 필요한 모듈들을 로딩하고, 번들링하여 최종적으로 하나의 파일로 생성합니다. 이러한 번들 파일은 웹 애플리케이션에서 로드되어 실행됩니다. 모듈 번들러는 코드의 모듈화, 의존성 관리, 로딩 속도 개선 등을 담당하여 프론트엔드 애플리케이션의 개발과 배포를 효율적으로 관리할 수 있게 도와줍니다. (웹팩이나 Vite , LaravelMix와 Browserify등이 있다 )
웹팩 (Webpack):
웹팩은 모듈 번들러의 한 종류로, 프론트엔드 개발에서 사용되는 다양한 자원들을 모듈 단위로 관리하고 번들로 묶어주는 역할을 수행합니다. 웹팩은 의존성 그래프를 생성하여 필요한 모듈들을 로딩하고, 로더(loader)와 플러그인(plugin)을 통해 다양한 처리 작업을 수행합니다. 주로 JavaScript, CSS, 이미지 등의 자원들을 번들링하며, 코드의 압축, 최적화, 트랜스파일링 등을 지원하여 개발자가 효율적으로 프론트엔드 애플리케이션을 구축할 수 있도록 도와줍니다.(모듈 번들러의 한 종류임)
┎────────────────────────────────────이 과정이 빌드──────────────────────────────────┓
모듈(큰틀은 JS소스코드단위) or 리소스(img/js/css) -> 모듈 번들러 사용 (모듈 번들러 종류중 하나가 웹팩) -> 최적화되고 압축되어 배포되기 적합해짐모듈: 분리된 코드의 작은 단위
리소스: HTML, CSS, JavaScript, 이미지, 폰트파일등
웹팩의 기능
1.핫리로딩
핫리로딩(Hot Reloading)은 개발 환경에서 웹팩과 같은 모듈 번들러가 제공하는 기능 중 하나입니다. 핫리로딩은 개발 서버(dev server)와 함께 사용하여 코드 수정 시 웹 애플리케이션을 다시 빌드하고 새로고침하지 않고도 변경 사항을 실시간으로 반영해주는 기능입니다. 개발자가 코드를 수정하면 웹 애플리케이션에 대한 변경 사항이 자동으로 감지되어 모듈 번들을 다시 생성하고, 변경된 모듈만 실시간으로 적용됩니다. 이를 통해 개발자는 수정한 코드의 결과를 빠르게 확인하고 개발 시간을 단축할 수 있습니다.(웹팩의 기능으로 수정감지해서 자동으로 갱신)
2.모듈 로딩과 의존성 관리
웹팩은 JavaScript 파일뿐만 아니라 CSS, 이미지, 폰트 등 다양한 리소스도 모듈로 취급합니다.
예를 들어, JavaScript 파일에서 CSS 파일을 import하여 사용하거나, 이미지를 import하여 사용할 수 있습니다.
이렇게 웹팩은 모듈 간의 의존성을 파악하고 로딩 순서를 자동으로 처리해줍니다.
3.번들링과 압축
웹팩은 여러 개의 모듈 파일을 하나의 번들 파일로 묶어줍니다. 이를 통해 웹 애플리케이션에서 필요한 모든 코드를 하나의 파일로 관리할 수 있습니다. 또한, 웹팩은 번들 파일의 압축을 지원하여 파일 크기를 최소화할 수 있습니다. 작은 파일 크기는 웹 애플리케이션의 로딩 속도를 향상시키는데 도움을 줍니다.(개발자도구에서 보이는 main.js파일등..)
4.자원 관리
웹팩은 다양한 자원을 관리할 수 있습니다. CSS 파일에서는 스타일 시트를 추출하고, 자바스크립트 파일에서는 ES6+ 문법을 하위 브라우저에서 호환 가능한 문법으로 변환합니다. 또한, 이미지 파일은 작은 크기로 압축하고, 폰트 파일은 웹폰트로 변환하여 사용할 수 있습니다. 이를 통해 웹팩은 자원을 최적화하여 웹 애플리케이션의 성능을 향상시킵니다.(바벨같은 기능인가?)
5.환경별 설정
웹팩은 개발 환경과 프로덕션 환경을 구분하여 설정할 수 있습니다. 개발 환경에서는 디버깅을 위한 소스 맵(Source Map)을 생성하여 원본 소스 코드와 번들 파일 간의 대응 관계를 제공합니다. 또한, 개발 환경에서는 코드의 최적화를 최소화하여 빠른 빌드 속도와 개발 경험을 제공합니다. 프로덕션 환경에서는 번들 파일을 압축하고 최적화하여 작은 파일 크기와 빠른 로딩 속도를 지원합니다.
요약하자면, 빌드는 소스 코드와 리소스들을 처리하여 실행 가능한 형태로 변환하는 과정입니다.
모듈은 독립적인 기능을 수행하는 코드의 단위로,
모듈 번들러는 모듈들을 하나의 번들로 묶어주는 도구입니다.
웹팩은 모듈 번들러의 한 종류로, 웹 애플리케이션의 자원 관리와 번들링을 담당하며, 핫리로딩과 함께 사용되어 개발 환경에서 실시간으로 변경 사항을 반영할 수 있습니다. 웹팩은 웹 애플리케이션의 프론트엔드 개발에서 주로 사용되며, 자바스크립트, CSS, 이미지, 폰트 등의 리소스들을 관리하고 번들링합니다.