728x90

오늘은 Vanilia JS 를 활용한 SPA 프로젝트에서 Babel + TypeScript + Webpack 을 설정하는 법에 대해서 알아보려고 합니다.

Babel이란?

Babel

Current Sponsors We're a small group of volunteers that spend their free time maintaining this project, funded by the community. If Babel has benefited you in your work, becoming a contributor or sponsoring might just be a great way to give back!

babeljs.io

공식문서에는 다음과 같은 소개가 나와있습니다.

Babel is a JavaScript compiler

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

Transform syntax
Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
Source code transformations (codemods)
And more! (check out these videos for inspiration)

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

최신 JavaScript/TypeScript 코드를 구형 브라우저나 Node.js 환경에서도 동작 가능하게 변환하는 도구(트랜스파일러)이다.

다음과 같이 문법 변환과 관련한 역할을 맡습니다.

최신 ECMAScript 문법(ES2020+)을 하위 호환 코드로 변경
누락된 폴리필 기능
타입 어노테이션 제거 ( Babel은 타입 검사를 하지 않는다 )
React JSX → JS 코드 변환
그 외의 많은 것들 -> https://babeljs.io/videos 참고

Webpack

JS, TS, CSS, 이미지, 폰트 등 모든 리소스를 하나의 파일로 묶어주는 모듈 번들러(Module Bundler)입니다.

현대 프론트엔드 앱은 수십~수백 개의 JS/TS 파일, CSS, 이미지, 폰트 등으로 구성되기 때문에 브라우저가 직접 모든 파일을 로드하면 네트워크 요청이 너무 많아지고, 관리가 복잡해집니다.

따라서 Webpack은 소스 코드를 분석해서 의존성 그래프(Dependency Graph) 를 만들고, 불필요한 코드 제거(Tree-shaking)와 함께 최종 번들 파일(bundle.js)로 묶어 주어 효율적인 로딩을 가능하게 합니다.

모듈 번들링 (Module Bundling) : 여러 개 파일을 하나의 번들로 묶음
로더 적용 : Babel, TypeScript 같은 Loader를 통해 ES6 -> ES5 변환 적용, TS -> JS 변환 적용
자원 관리 (CSS, 이미지, 폰트 등) : 효율적인 CSS 와 이미지/폰트 관리
- css-loader, style-loader → CSS 관리
- asset/resource, file-loader → 이미지/폰트 관리
최적화(Tree Shaking, Code Splitting) : 번들 크기를 줄이는 다양한 최적화 기능을 제공
개발 서버(HMR) : webpack-dev-server 를 활용하여 HMR(Hot Module Replacement) 적용

HMR(Hot Module Replacement)

https://webpack.kr/guides/hot-module-replacement/

Hot Module Replacement | 웹팩

웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.

webpack.kr

Hot Module Replacement(또는 HMR)는 webpack에서 제공하는 가장 유용한 기능 중 하나입니다.

Hot Module Replacement (HMR) 은 애플리케이션 실행 중에 모듈을 교체하는 기능입니다.

코드가 변경되면 전체 페이지를 새로고침하지 않고, 바뀐 모듈만 교체해서 UI에 반영합니다.

  // 개발 서버 설정 (webpack-dev-server)
  devServer: {

    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 3000, 
    open: true, 
    hot: true, // HMR(Hot Module Replacement) 활성화
    historyApiFallback: true,
  },

HMR with Stylesheets

CSS 의존성이 업데이트될 때 <style>태그를 패치하기 위해 백그라운드에서 module.hot.accept를 사용

=> 새로고침 없이도 스타일이 반영

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
    },
    devtool: 'inline-source-map',
    devServer: {
      static: './dist',
      hot: true,
    },
   module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       },
     ],
   },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement',
      }),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
  };

📦 Webpack 초기 설정 가이드

1. 프로젝트 초기화

mkdir my-webpack-app
cd my-webpack-app
npm init -y

npm init -y → package.json 자동 생성

2. Webpack 설치

npm install --save-dev webpack webpack-cli

webpack → 번들러
webpack-cli → CLI 명령어 실행 도구

3. 기본 프로젝트 구조

my-webpack-app/
├── src/
│   └── index.js   # 엔트리 포인트
├── dist/
│   └── index.html # 최종 빌드된 파일을 로드
├── package.json

src/ : 개발용 소스 코드
dist/ : 빌드 결과물이 들어갈 폴더

4. Webpack 기본 설정 파일

프로젝트 루트에 webpack.config.js 생성:

const path = require("path");

module.exports = {
  entry: "./src/index.js", // 시작점
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js", // 번들 파일 이름
  },
  mode: "development", // "development" | "production"
};

5. index.html 작성

dist/index.html에 번들링된 JS 파일을 로드하도록 설정합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Webpack App</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

6. 빌드 실행

package.json에 script 추가:

"scripts": {
  "build": "webpack"
}

실행:

npm run build

dist/bundle.js 파일 생성됨
index.html에서 로드 가능

7. 개발 서버 (선택)

편리한 개발 환경을 위해 webpack-dev-server를 추가합니다.

npm install --save-dev webpack-dev-server

webpack.config.js 수정:

devServer: {
  static: "./dist", // 정적 파일 제공 경로
  open: true,       // 자동으로 브라우저 열기
  hot: true,        // HMR (Hot Module Replacement)
}

package.json 스크립트 추가:

"scripts": {
  "start": "webpack serve --open"
}

8. 추가 기능 (선택)

Babel (최신 JS 변환):

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: { presets: ["@babel/preset-env"] }
      }
    }
  ]
}

npm install --save-dev babel-loader @babel/core @babel/preset-env

CSS 로더:

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

npm install --save-dev style-loader css-loader

여기까지 하면 Webpack 기본 환경 세팅 완료입니다.

📦 Babel + TS configuarion 구성

이제 기본 Webpack 세팅에 이어 Babel + TS configuarion 설정을 해야합니다.

Babel과 TypeScript를 Webpack 환경에 통합하려면 두 가지 접근이 있습니다.

ts-loader (TypeScript 컴파일러를 직접 사용)
babel-loader + @babel/preset-typescript (Babel로 TS → JS 변환)

최근 프론트엔드에서는 Babel 기반 설정을 많이 씁니다. (빠르고 Babel 플러그인 생태계 활용 가능)
아래는 Babel + TypeScript + Webpack 설정 가이드입니다.

1. 의존성 설치

npm install --save-dev \
  typescript \
  @babel/core \
  @babel/preset-env \
  @babel/preset-typescript \
  babel-loader \
  webpack webpack-cli webpack-dev-server

typescript → 타입 검사
@babel/preset-env → 최신 JS를 브라우저 호환 코드로 변환
@babel/preset-typescript → TS 구문을 JS로 변환
babel-loader → Babel을 Webpack에서 사용

2. 프로젝트 구조

my-app/
├── src/
│   └── index.ts
├── dist/
│   └── index.html
├── tsconfig.json
├── babel.config.js
├── webpack.config.js
└── package.json

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

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: "defaults" }], 
    "@babel/preset-typescript"
  ]
};

4. TypeScript 설정 (tsconfig.json)

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true      // Babel이 변환하므로 TS는 파일 출력 안 함
  },
  "include": ["src"]
}

⚠️ noEmit: true로 설정해야 TypeScript가 JS 파일을 따로 내보내지 않고 타입 체크만 수행합니다.

5. Webpack 설정 (webpack.config.js)

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".ts", ".js"], // import 시 확장자 생략 가능
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,    // .ts, .tsx 파일
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  devServer: {
    static: "./dist",
    open: true,
    hot: true,
  },
  mode: "development"
};

6. 실행 스크립트 (package.json)

"scripts": {
  "build": "webpack",
  "start": "webpack serve --open",
  "type-check": "tsc --noEmit"
}

7. 샘플 코드 (src/index.ts)

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("서연"));

✅ 동작 원리

tsc --noEmit → 타입 검사 전용
babel-loader → .ts 파일을 읽어와 JS로 변환
@babel/preset-env → 브라우저 호환 코드로 변환
최종 번들은 dist/bundle.js로 생성

여기서 선택지가 있는데요.

타입 검사 속도를 높이고 싶다 → fork-ts-checker-webpack-plugin 추가
React + TS + Babel 환경을 만들고 싶다 → @babel/preset-react 추가

'💙 프론트엔드(FE)' 카테고리의 다른 글

웹 애니메이션 제대로 활용하기: Transition, Keyframes, rAF, WAAPI 비교와 활용법 (0)	2025.09.24
Webpack Tree Shaking 동작 원리 (0)	2025.09.17
MVC 구조 - 옵저버 패턴 ( Observer Pattern ) (0)	2025.09.08
[Javascript] 이벤트 전파 & 이벤트 위임 (1)	2025.09.08
[CoderPad] 리액트 가상 스크롤 (Virtualized List) (5)	2025.06.22

Webpack + Babel + TypeScript 설정 가이드

Babel이란?

Babel is a JavaScript compiler

Webpack

HMR(Hot Module Replacement)

HMR with Stylesheets

📦 Webpack 초기 설정 가이드

1. 프로젝트 초기화

2. Webpack 설치

3. 기본 프로젝트 구조

4. Webpack 기본 설정 파일

5. index.html 작성

6. 빌드 실행

7. 개발 서버 (선택)

8. 추가 기능 (선택)

📦 Babel + TS configuarion 구성

1. 의존성 설치

2. 프로젝트 구조

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

4. TypeScript 설정 (tsconfig.json)

5. Webpack 설정 (webpack.config.js)

6. 실행 스크립트 (package.json)

7. 샘플 코드 (src/index.ts)

✅ 동작 원리

'💙 프론트엔드(FE)' 카테고리의 다른 글

티스토리툴바