JavaScript에서 Webpack 번들러의 작동 원리

일반적으로 개발을 하다 보면 여러 조각의 코드를 담고 있는 많은 JavaScript 파일이 생깁니다. 이는 우리가 작성한 코드의 일부일 수도 있고, 외부 라이브러리일 수도 있습니다. 결국 각각의 파일을 HTML 파일에 script 태그를 통해 연결해야 한다는 뜻이 됩니다.

연결된 파일이 많으면 사이트 로딩 속도가 느려지기 때문에 이것은 좋지 않습니다. 따라서 로딩 속도를 높이기 위해 모든 코드를 하나의 파일로 합치는 것이 필요합니다.

그러나 하나의 공통 파일에서 코드를 개발하는 것도 매우 불편합니다. 그래서 현재는 다음과 같은 방식이 일반적입니다: 코드는 별도의 파일에서 개발되고, 번들러를 사용하여 하나의 공통 파일로 번들링된 후 HTML 파일에 연결됩니다.

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

일반적으로 다른 모든 파일이 연결되는 주요 파일을 만듭니다. 이 파일을 진입점(entry point)이라고 합니다.

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

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

번들러는 빌드 모드를 조절할 수도 있습니다. 'development' 모드는 개발 과정을 위해 설계되었습니다. 이 모드는 개발에 편리한 방식으로 코드를 번들링합니다. 'production' 모드는 실제 작업에 배포될 최종 코드를 위해 설계되었습니다. 이 모드에서는 코드 크기를 줄이고 로딩 속도를 높이기 위해 코드가 최소화(minify)됩니다.