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

11 Dec 2023

typescript

웹팩(Webpack)은 모듈 번들러로, 프런트엔드 프로젝트에서 자바스크립트, HTML, CSS 등의 리소스들을 번들링할 수 있게 해줍니다. 타입스크립트(TypeScript)는 자바스크립트를 대체하여 더 강력한 정적 타입 시스템을 제공합니다. LESS는 CSS 전처리기로, 변수 및 함수같은 프로그래밍적 구조를 추가하여 CSS를 좀 더 유지보수하기 쉽게 합니다.

이번 포스트에서는 웹팩으로 타입스크립트와 LESS를 함께 사용하는 방법을 살펴보겠습니다.

설정

먼저, 프로젝트 폴더에서 다음 명령어를 통해 타입스크립트와 웹팩 관련 패키지를 설치합니다.

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

그 후, 프로젝트 루트에 webpack.config.js 파일을 생성하여 웹팩 구성을 추가합니다.

const path = require('path');

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

위의 구성은 웹팩이 타입스크립트 및 LESS 파일을 포함하여 번들링하도록 하는 부분을 보여줍니다.

사용

이제 src 폴더에 index.ts와 style.less 파일을 만들고, 다음 코드를 추가합니다.

index.ts

console.log('Hello, TypeScript!');

style.less

@primary-color: #007bff;

body {
  background-color: @primary-color;
}

마지막으로, dist/index.html 파일에서 bundle.js를 로드하여 프로젝트를 실행할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack TypeScript LESS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

결론

이제 웹팩을 사용하여 타입스크립트 및 LESS를 함께 사용하는 방법을 살펴보았습니다. 이를 통해 프런트엔드 프로젝트에서 강력한 정적 타입 시스템과 CSS 전처리기를 함께 사용할 수 있게 되었습니다.

더 많은 설정 및 옵션들에 대해서는 웹팩과 각 패키지의 문서를 참고하시기 바랍니다.

참고: 웹팩 공식 문서, 타입스크립트 공식 문서, LESS 공식 문서