웹팩으로 번들링

네, Webpack을 사용하여 TypeScript 프로젝트를 번들링하는 방법을 설명드리겠습니다. Webpack은 모듈 번들러로, TypeScript 프로젝트를 JavaScript로 컴파일하고, 하나의 번들 파일로 묶어주는 도구입니다. 요즘에는 다양한 번들링 도구들이 있지만, Webpack은 여전히 널리 사용되고 있습니다.

### 1. Webpack 및 Webpack CLI 설치

먼저, 프로젝트 디렉토리에서 Webpack과 Webpack CLI를 설치합니다.

```bash
npm install --save-dev webpack webpack-cli
```

### 2. TypeScript 및 관련 로더 설치

TypeScript와 Webpack이 TypeScript 파일을 처리할 수 있도록 필요한 로더들을 설치합니다.

```bash
npm install --save-dev typescript ts-loader
```

### 3. `tsconfig.json` 파일 설정

TypeScript 설정 파일인 `tsconfig.json`을 설정합니다.

```json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./src",
    "paths": {
      "@controllers/*": ["controllers/*"],
      "@models/*": ["models/*"],
      "@services/*": ["services/*"],
      "@utils/*": ["utils/*"]
    },
    "lib": ["ES6", "DOM"],
    "sourceMap": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "test/**", "dist"]
}
```

### 4. `webpack.config.js` 파일 생성 및 설정

프로젝트 루트 디렉토리에 `webpack.config.js` 파일을 생성하고 다음과 같이 설정합니다.

```javascript
const path = require('path');

module.exports = {
  entry: './src/main.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      '@controllers': path.resolve(__dirname, 'src/controllers/'),
      '@models': path.resolve(__dirname, 'src/models/'),
      '@services': path.resolve(__dirname, 'src/services/'),
      '@utils': path.resolve(__dirname, 'src/utils/'),
    },
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
```

### 5. `package.json` 스크립트 추가

`package.json` 파일에 빌드 스크립트를 추가합니다.

```json
{
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "start": "node dist/bundle.js"
  }
}
```

### 6. 프로젝트 구조 예제

```
my-ts-project/
├── src/
│   ├── controllers/
│   │   ├── user.controller.ts
│   ├── models/
│   │   ├── user.model.ts
│   ├── services/
│   │   ├── user.service.ts
│   ├── utils/
│   │   ├── helpers.ts
│   ├── main.ts
├── node_modules/
├── dist/
├── package.json
├── tsconfig.json
├── webpack.config.js
```

### 7. 코드 예제

#### `main.ts`

```typescript
import { UserController } from '@controllers/user.controller';
import { UserModel } from '@models/user.model';
import { UserService } from '@services/user.service';
import { helperFunction } from '@utils/helpers';

console.log(UserController, UserModel, UserService, helperFunction);
```

### 8. 빌드 및 실행

1. **빌드**:
   ```bash
   npm run build
   ```

2. **실행**:
   ```bash
   npm start
   ```

이제 `npm run build` 명령어를 사용하여 TypeScript 파일을 번들링하고, `npm start` 명령어를 사용하여 번들된 파일을 실행할 수 있습니다. 이 설정을 통해 Webpack을 사용하여 TypeScript 프로젝트를 관리하고, 모듈 경로를 간편하게 사용할 수 있습니다.