[typescript] 웹팩으로 타입스크립트와 Autoprefixer 연동하기

11 Dec 2023

typescript

웹팩(Webpack)은 모듈 번들러로, 자바스크립트나 CSS 파일과 같은 모든 리소스를 하나의 번들로 묶을 수 있도록 도와줍니다. 타입스크립트(TypeScript)는 정적 타입을 지원하는 자바스크립트의 확장 버전입니다. Autoprefixer는 최신 CSS 기능을 사용하고, 브라우저 호환성을 자동으로 처리해주는 도구입니다.

이제 웹팩을 사용하여 타입스크립트와 Autoprefixer를 함께 사용하는 방법에 대해 알아보겠습니다.

웹팩으로 타입스크립트와 Autoprefixer 설정하기

먼저, 웹팩 프로젝트에 필요한 의존성을 설치합니다.

npm install webpack webpack-cli typescript ts-loader css-loader style-loader postcss-loader autoprefixer

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

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

위의 설정에서는 타입스크립트 파일을 컴파일하는 데 ts-loader를 사용하고, CSS 파일을 처리하고 Autoprefixer를 적용하는 데 css-loader와 postcss-loader를 사용합니다.

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

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

이제 모든 설정이 완료되었습니다. 타입스크립트 및 CSS 파일을 작성하고, 웹팩을 실행하여 번들을 생성하면 Autoprefixer가 자동으로 적용될 것입니다.

위에서 설명한 방법을 통해 웹팩을 사용하여 타입스크립트와 Autoprefixer를 쉽게 연동할 수 있습니다. 이를 통해 브라우저 호환성을 고려하면서 최신 CSS 기능을 사용할 수 있습니다.

웹팩으로 타입스크립트와 Autoprefixer 설정하기

참고 자료