번들링과 웹팩

번들링

동서식품 POST에서 콘푸라이트를 사면 제공했던 게임 CD ‘하얀마음백구’ 사례와 같이 실질적으로 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위

그렇다면 프론트엔드 개발자에게 번들링은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음입니다.

웹팩

여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러

• 모듈 번들러 : 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구

2022년 7월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러입니다.

웹팩의 핵심 개념

• loader는 JavaScript, JSON이 아닌 파일을 불러와 처리합니다.

  Node.js는 그 자체만으로는 CSS를 읽을 수 없어 문법 에러가 발생합니다. 적절한 로더로 CSS 파일을 처리해야 합니다.

• html-webpack-plugin은 번들링 과정 중 html 파일을 자신이 원하는 형태로 가공하여 번들에 포함할 수 있게 돕습니다.