📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈

✅ 3편: Webpack 제대로 이해하기 – 번들링 개념과 설정 파일 완전 분석

이번 글에서는 Webpack의 핵심 개념인 번들링, 모듈, 의존성 그래프, 로더, 플러그인을 실제 코드와 함께 이해하고,
우리가 작성한 TypeScript 코드가 어떻게 브라우저에서 실행 가능한 자바스크립트로 변환되는지
Webpack이 어떤 역할을 수행하는지를 체계적으로 설명하겠습니다.

🎯 목표

Webpack의 역할과 작동 방식 이해
webpack.config.js의 주요 속성 분석
Webpack에서 ts-loader, dev-server, output 구조 설정 완전 정복

🧠 Webpack이란?

Webpack은 모듈(Module)을 하나의 번들로 묶어주는 정적 자바스크립트 모듈 번들러입니다.

✔️ 왜 필요한가?

ES Module 또는 CommonJS로 분리된 수많은 파일들을 하나로 묶어 브라우저에서 효율적으로 실행
트리 쉐이킹(Tree Shaking)으로 사용하지 않는 코드 제거
번들 최적화, 코드 스플리팅 등 가능

📦 기본 개념 정리

개념 설명

Entry	Webpack이 의존성 분석을 시작하는 진입점 파일 (index.ts)
Output	최종적으로 번들된 파일이 생성되는 위치 (dist/bundle.js)
Loader	TypeScript, SCSS 등 JS가 아닌 파일을 처리하는 도구
Plugin	번들 최적화, HTML 생성 등 다양한 부가기능 담당
DevServer	개발 중 실시간 빌드 및 핫리로드 지원 서버

📁 프로젝트 구조 다시 보기

calendar-plugin/
├── dist/               # 번들 결과 (자동 생성)
├── src/
│   └── index.ts        # TypeScript 진입점
├── index.html          # 테스트용 HTML
├── tsconfig.json
├── webpack.config.js
└── package.json

🧪 Webpack 설정 파일 분석

✅ webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.ts", // 진입점
  mode: "development",     // 개발 모드 (production 시 최적화)
  module: {
    rules: [
      {
        test: /\.ts$/,     // .ts 파일에 대해
        use: "ts-loader",  // ts-loader로 처리
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".js"], // import 시 확장자 생략 허용
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"), // 번들 파일 저장 위치
  },
  devServer: {
    static: "./dist",  // 정적 파일 제공 위치
    port: 8080,
    open: true,
    hot: true,         // HMR (Hot Module Replacement)
  },
};

🔧 핵심 설정 항목 설명

✅ Entry: entry: "./src/index.ts"

Webpack이 모듈 분석을 시작할 기준 파일입니다.

✅ Output

output: {
  filename: "bundle.js",
  path: path.resolve(__dirname, "dist"),
}

번들 결과물이 저장될 위치와 파일명을 지정합니다.

✅ Module + Loader

module: {
  rules: [
    {
      test: /\.ts$/,
      use: "ts-loader"
    }
  ]
}

.ts 파일을 ts-loader를 통해 JS로 변환합니다.

✅ DevServer

devServer: {
  static: "./dist",
  hot: true
}

실시간 코드 반영과 자동 새로고침을 제공합니다.

🔍 ts-loader vs babel-loader

항목 ts-loader babel-loader

특징	TypeScript 컴파일	ES6+ 문법 변환
사용 목적	타입 검사 포함	레거시 브라우저 대응
함께 사용	tsconfig.json	.babelrc, @babel/preset-typescript

우리의 프로젝트에서는 ts-loader만으로 충분합니다.

✅ 실습: 코드 수정 & 반영 확인

src/index.ts

const root = document.getElementById("calendar-root");
if (root) {
  root.innerHTML = "<h2>📅 Webpack 번들링 완성!</h2>";
}

npm run dev

브라우저에서 localhost:8080 접속 → 자동으로 "📅 Webpack 번들링 완성!" 메시지 출력되면 성공!

🚀 빌드 결과 확인

npm run build

dist/bundle.js 파일이 생성되며, 실제 서비스에 사용 가능한 자바스크립트 번들이 준비됩니다.

💡 Webpack과 TypeScript의 흐름 요약

[index.ts] --ts-loader→ [JavaScript 모듈] --Webpack→ [bundle.js] → 브라우저 실행

Webpack은 우리의 TypeScript 코드를 브라우저가 실행할 수 있는 JS 파일로 만드는 핵심 도구입니다.

📚 필수 참고자료

다음 편 예고:
📘 4편 – 캘린더 플러그인 구조 설계: 날짜 렌더링을 위한 UI 기본 구성
실제 캘린더를 어떻게 렌더링할지 설계하며 DOM과 타입을 연결해봅니다.
궁금한 점은 댓글로 남겨주세요! 🙌