진입점

<aside> 💡

Module Resolution이 시작되는 파일

</aside>

번들러는 Entry 파일에서부터 모듈 탐색(Module Resolution) 시작
import or require 구문을 따라가며 탐색
탐색 결과를 통해 의존성 그래프 생성
의존성 그래프를 기반으로 번들 파일 생성

진입점 구성 방식

<aside> 💡

규모가 작다 ⇒ 단일 구문, 규모가 크다 ⇒ 객체 구문

</aside>

	단일 엔트리 구문	객체 구문
번들 파일 개수	하나의 번들 파일	여러 개의 번들 파일
성능 영향	규모가 커질수록 번들 파일이 커져 로딩 속도 저하 가능	필요한 코드만 로드하여 성능 최적화 가능
적합한 프로젝트 규모	규모가 작은 애플리케이션, 라이브러리	규모가 큰 애플리케이션
사용 사례	간단한 웹사이트, 라이브러리	다중 페이지 애플리케이션, 기능별 번들 분리 필요 시

단일 엔트리

<aside> 💡

번들 파일 1개

</aside>

단일 엔트리 - 문자열 지정

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

// output : bundle.js

단일 엔트리 - 배열 지정