웹팩과 번들파일

웹팩과 번들파일

Created
March 2, 2024
Tags
React

웹팩(Webpack)

모듈

애플리케이션이 동작하는 데 필요한 파일을 모듈이라고 한다. JavaScript 코드뿐만 아니라 이미지 파일, CSS 파일, HTML 파일, 폰트 등의 파일도 모듈로 사용된다.

웹팩

웹팩은 프로젝트에서 사용되는 다양한 모듈들을 하나의 또는 여러 개의 번들 파일로 변환해 주는 역할이다. 즉, JavaScript 애플리케이션을 위한 모듈 번들러(Module Bundler)이다.

웹팩은 여러 모듈과 리소스를 importrequire 문을 통해 가져와서 이를 하나 또는 여러 개의 번들 파일로 묶어주는데, 이는 각 모듈 간의 의존성과 로딩 순서를 파악하여 최적의 번들링을 수행한다.

번들(Bundle) 파일

웹팩의 결과물을 번들이라고 한다. 번들 파일은 브라우저에서 실행될 수 있는 형태로, 웹 애플리케이션의 리소스들을 효율적으로 로드할 수 있도록 한다.

브라우저에서 실행될 수 있는 형태? 그렇다. 웹팩이나 기타 번들러를 사용하여 생성된 번들 파일은 JavaScript 코드로 변환되며, 브라우저에서 실행될 수 있는 형태로 변환된다.

번들링

번들링(Bundling)은 여러 모듈 및 리소스들을 하나의 번들 파일로 묶는 과정이다. 웹팩이 대표적인 모듈 번들러 도구이다.