[typescript] 웹팩으로 번들링된 파일 사용하기

11 Dec 2023

typescript

웹팩(Webpack)은 모듈 번들러로, 여러 개의 프로젝트 파일을 하나의 번들 파일로 합쳐줍니다. 여기서는 TypeScript 프로젝트에서 웹팩을 사용하여 번들링된 파일을 사용하는 방법을 알아보겠습니다.

웹팩 설정하기

우선, 웹팩과 TypeScript를 사용하기 위한 기본적인 설정을 해야합니다. 프로젝트 루트 폴더에 package.json 파일이 있어야 합니다. 그리고 웹팩과 TypeScript를 설치합니다.

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

웹팩 구성 파일인 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는 TypeScript로 작성된 소스 코드의 진입점을 나타내며, output은 번들링된 파일의 경로와 이름을 지정합니다. module과 resolve는 TypeScript로 작성된 소스 코드를 번들링하기 위한 로더 및 확장자를 설정합니다.

TypeScript 파일 작성 및 번들링

이제 TypeScript로 작성된 src/index.ts 파일을 만들고, 해당 파일에 TypeScript 코드를 작성합니다. 그리고 아래 명령어를 사용하여 웹팩을 실행하여 번들링된 파일을 생성합니다.

npx webpack

이렇게 하면 dist 폴더에 bundle.js 파일이 생성됩니다. 이제 HTML 파일에서 이 bundle.js 파일을 로드하여 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>웹팩 번들링 예제</title>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

이렇게 함으로써 TypeScript로 작성된 파일을 웹팩으로 번들링하여 사용할 수 있습니다.

이상으로, 웹팩으로 번들링된 파일을 사용하는 방법을 알아보았습니다.

참고 문헌:

Webpack Documentation: https://webpack.js.org/concepts/
TypeScript Handbook: https://www.typescriptlang.org/docs/