이번 포스트에서는 웹팩을 사용하여 타입스크립트와 SASS를 연동하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정

먼저, 타입스크립트와 SASS를 사용할 프로젝트를 설정합니다. 프로젝트 디렉토리를 생성하고 다음과 같이 초기화합니다.

mkdir my-project
cd my-project
npm init -y

그런 다음, 타입스크립트와 SASS를 설치합니다.

npm install typescript sass

2. 웹팩 설치 및 설정

웹팩을 설치합니다.

npm install webpack webpack-cli --save-dev

웹팩 설정 파일 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'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

위의 설정에서는 웹팩이 .ts 확장자를 가진 파일을 발견하면 ts-loader를 사용하여 컴파일하고, .scss 확장자를 가진 파일을 발견하면 sass-loader, css-loader, style-loader를 사용하여 컴파일합니다.

3. tsconfig.json 설정

타입스크립트의 설정 파일인 tsconfig.json을 생성하여 아래와 같이 설정합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

4. SASS 파일 및 타입스크립트 파일 작성

src 디렉토리를 만들고 index.ts와 styles.scss 파일을 생성합니다.

// index.ts
console.log('Hello, TypeScript!');

// styles.scss
body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}

5. 빌드 및 실행

이제 모든 준비가 되었습니다. 다음 명령어를 실행하여 웹팩을 사용하여 프로젝트를 빌드합니다.

npx webpack

웹팩이 성공적으로 빌드를 완료하면 dist 디렉토리에 bundle.js가 생성됩니다.

index.html 파일을 만들어서 빌드된 bundle.js를 불러오면, 타입스크립트와 SASS가 정상적으로 적용된 웹앱을 확인할 수 있습니다.

이로써 웹팩을 사용하여 타입스크립트와 SASS를 연동하는 방법에 대해 알아보았습니다.

더 많은 정보는 웹팩 공식 문서를 참고하시기 바랍니다.