제3편. Babel + Webpack 실전 환경 구성 가이드 (TypeScript 포함)

이번 편에서는 실전 프로젝트를 기반으로 Babel과 Webpack을 설치하고 설정하는 방법을 다룹니다. ES6 코드를 변환하는 기본 환경에서 시작해, TypeScript까지 통합하는 과정을 단계별로 설명합니다.

3-1. 프로젝트 초기화 및 기본 패키지 설치

mkdir my-webpack-app
cd my-webpack-app
npm init -y
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env

3-2. Babel 설정 (babel.config.js)

// babel.config.js
module.exports = {
  presets: ["@babel/preset-env"],
};

@babel/preset-env는 현재 환경에 맞게 ES6+ 문법을 변환해 줍니다.

3-3. Webpack 설정 (webpack.config.js)

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

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};

3-4. ES6 코드 트랜스파일 & 번들링 테스트

src/index.js 파일 작성:

// src/index.js
const greet = (name) => {
  console.log(`안녕하세요, ${name}님!`);
};

greet("H.Y");

Webpack 실행:

npx webpack

dist/bundle.js 파일이 생성됩니다.
dist/index.html 파일 생성:

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>Webpack + Babel 테스트</title>
</head>
<body>
  <script src="./bundle.js"></script>
</body>
</html>

브라우저에서 dist/index.html을 열면 콘솔에서 메시지를 확인할 수 있습니다.

3-5. TypeScript 통합 환경 구성

TypeScript 및 관련 패키지 설치:

npm install --save-dev typescript ts-loader

TypeScript 설정 파일 생성:

npx tsc --init

tsconfig.json 주요 설정:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

Webpack 설정 수정:

// webpack.config.js (ts-loader 추가)
module.exports = {
  // ...
  resolve: {
    extensions: [".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

3-6. TypeScript 코드 예시 및 빌드

src/index.ts 작성:

function greet(name: string): void {
  console.log(`타입스크립트로 안녕하세요, ${name}님!`);
}

greet("H.Y");

Webpack 실행:

npx webpack

브라우저에서 dist/index.html을 열어 결과 확인

요약

Babel은 최신 JS 문법을 변환하고, Webpack은 파일들을 묶어 배포용으로 최적화합니다.
babel-loader, ts-loader를 조합해 ES6 및 TypeScript를 모두 처리할 수 있습니다.
설정 파일을 정확히 구성하면 TypeScript 기반 프로젝트도 Webpack 환경에서 효율적으로 관리할 수 있습니다.

심화학습

Q1. Webpack 설정 시 entry/output 외에 자주 사용하는 옵션은 무엇이 있을까?
devtool은 소스맵 제공, devServer는 실시간 핫 리로드, plugins는 빌드 결과에 후처리를 추가합니다. 실무에선 HtmlWebpackPlugin, MiniCssExtractPlugin 등이 많이 쓰입니다.

Q2. ts-loader와 babel-loader는 같이 쓰면 안 될까?
둘 다 사용할 수 있습니다. 예를 들어 ts-loader로 타입 검사와 트랜스파일을 진행하고, 그 결과를 babel-loader로 한 번 더 변환할 수 있습니다. 다만 설정이 복잡해지고 속도가 느려질 수 있어 역할 분담이 중요합니다.

Q3. TypeScript 환경에서 브라우저에서 어떤 파일을 어떻게 호출해야 실행을 확인할 수 있을까?
Webpack 빌드 결과인 dist/bundle.js가 실행 파일입니다. 이를 <script src="./bundle.js"></script> 형태로 dist/index.html에 포함시키고, 브라우저에서 dist/index.html을 열면 확인 가능합니다. 개발 서버를 구성하지 않더라도 정적 HTML로 로컬 테스트가 가능합니다.