웹팩(Webpack)은 모듈 번들러로, 타입스크립트(TypeScript)와 함께 사용하면서 프로젝트를 빌드하고 배포하기 위한 과정을 자동화할 수 있습니다. 이 블로그 포스트에서는 웹팩으로 타입스크립트와 배포 자동화를 연동하는 방법에 대해 다룰 것입니다.
목차
웹팩 설정 파일 생성
웹팩 설정 파일인 webpack.config.js를 프로젝트 루트 디렉토리에 생성합니다. 이 파일은 웹팩이 프로젝트를 빌드할 때 어떤 동작을 수행해야 하는지에 대한 구성을 담고 있습니다.
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
};
여기서 entry는 웹팩이 번들링할 진입점 파일을 지정하고, output은 번들링된 파일의 경로와 이름을 지정합니다. module과 resolve 부분은 타입스크립트를 웹팩이 이해할 수 있도록 설정합니다.
타입스크립트로 웹팩 설정 작성
기존의 webpack.config.js 파일을 타입스크립트 파일로 작성하여 웹팩이 타입스크립트 설정을 이해할 수 있도록 합니다. webpack.config.ts 파일을 생성하고 다음과 같이 작성합니다.
// webpack.config.ts
import path from 'path';
import { Configuration } from 'webpack';
const config: Configuration = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
};
export default config;
이제 웹팩이 webpack.config.ts 파일을 빌드할 수 있도록 설정되었습니다.
배포 자동화 설정
웹팩을 사용하여 번들링된 파일을 자동으로 서버에 배포하려면, 배포 자동화 도구를 사용할 수 있습니다. 예를 들어, GitHub Actions를 사용하여 소스 코드가 업데이트될 때마다 자동으로 배포할 수 있습니다. 이를 위해서는 빌드 스크립트를 작성하고 관련 설정을 GitHub Actions 워크플로우에 추가해야 합니다.
# .github/workflows/main.yml
name: Deploy on push
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Install dependencies
run: npm install
- name: Build and deploy
run: npm run build && npm run deploy
위의 예시는 코드가 업데이트될 때마다 npm run build 명령어를 통해 빌드하고, 그 후 npm run deploy 명령어를 통해 배포하는 GitHub Actions 워크플로우를 보여줍니다.
이제 웹팩과 타입스크립트를 사용하여 프로젝트를 빌드하고, 배포 자동화까지 설정하는 방법에 대해 알아보았습니다.