웹팩 번들러의 작동 원리

일반적으로 개발 과정에서 우리는 다양한 코드 조각들을 포함하는 많은 JavaScript 파일들을 생성하게 됩니다. 이는 우리 코드의 일부분일 수도 있고, 혹은 서드파티 라이브러리일 수도 있습니다. 결과적으로 각각의 이러한 파일들을 HTML 파일에 script 태그를 통해 연결해야 합니다.

이는 연결된 파일이 많을수록 사이트 로딩 속도를 늦추기 때문에 좋지 않습니다. 따라서 로딩 속도를 높이기 위해서는 모든 코드를 하나의 파일로 합쳐야 합니다.

그러나 하나의 공통 파일에서 코드를 개발하는 것도 그리 편리하지는 않습니다. 따라서 현재는 다음 접근 방식이 일반적입니다: 코드는 별도의 파일에서 개발되고, 그런 다음 번들러를 사용하여 하나의 공통 파일로 번들링되며, 이 파일이 HTML 파일에 연결됩니다.

별도의 파일들은 ES 모듈입니다. 이 모듈들은 import 명령어를 통해 다른 파일들에 연결됩니다.

보통 나머지 파일들이 연결되는 주요 파일을 생성합니다. 이 파일을 진입점이라고 합니다.

번들러는 진입점에 들어가서, 어떤 모듈들이 연결되어 있는지 확인합니다. 이 모듈들에도 다른 모듈들이 연결되어 있을 수 있습니다. 번들러는 모든 연결을 따라가며 전체 코드를 하나의 파일로 모읍니다. 이 파일을 번들이라고 합니다.

일반적으로 프로그래머가 작성한 코드는 src 폴더에 위치하고, 번들링된 코드는 dist 폴더에 위치시킵니다.

번들이 무엇인지 설명하세요.

진입점이 무엇인지 설명하세요.

어떤 빌드 모드가 있는지 설명하세요.