이번 포스트에서는 웹팩을 사용하여 타입스크립트 프로젝트에 이미지를 적용하는 방법에 대해 알아보겠습니다.

1. 타입스크립트 프로젝트 설정

먼저, 타입스크립트 프로젝트를 설정합니다. 프로젝트 폴더를 생성하고, 다음 명령어를 사용하여 타입스크립트 및 웹팩을 설치합니다.

npm install typescript webpack webpack-cli ts-loader --save-dev

그리고 tsconfig.json 파일을 생성하여 타입스크립트 설정을 추가합니다.

2. 웹팩 설정

다음으로, 웹팩 설정 파일(webpack.config.js)을 생성하고 다음과 같이 설정합니다.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  module: {
    rules: [{
      test: /\.ts$/,
      use: 'ts-loader',
      exclude: /node_modules/
    },
    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'file-loader',
        },
      ],
    }],
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

위 설정에서는 ts-loader를 사용하여 타입스크립트 파일을 컴파일하고, file-loader를 사용하여 이미지 파일을 번들에 포함시킵니다.

3. 이미지 사용

이제 타입스크립트 코드에서 이미지를 사용할 수 있습니다.

import image from './image.png';

const img = new Image();
img.src = image;
document.body.appendChild(img);

위 코드에서 image.png는 프로젝트 내 src 폴더에 위치한 이미지 파일입니다.

이제 이미지를 타입스크립트 코드에서 쉽게 활용할 수 있게 되었습니다.

이상으로 웹팩을 사용하여 타입스크립트에 이미지를 적용하는 방법에 대해 알아보았습니다.

참고: 웹팩 공식 문서 - 로더