Typescript와 함께 Webpack 사용

Webpack은 무엇에 관한 것입니까?

Webpack은 번들링 및 구축 오케스트레이션 도구입니다.
다운로드 가능한 파일을 줄이고 모든 코드가 포함된 하나의 번들 파일을 제공하기 위해 코드를 번들링, 정리 및 축소하여 최적화된 프로젝트를 제공하는 데 도움이 되는 도구입니다.

언제 사용합니까?

큰 프로젝트를 작업할 때 디렉토리에 많은 파일이 있을 것입니다. 그 외에도 이러한 파일을 함께 연결하려면 이러한 파일을 내보내고 가져와야 합니다.

일부 파일과 구성 요소가 있는 간단한 웹 애플리케이션을 살펴보겠습니다. 이러한 파일과 구성 요소는 아래와 같이 별도로 브라우저에 제공됩니다.



이제 이러한 파일의 크기가 커지면 이러한 구성 요소와 파일이 HTTP 요청을 별도로 만들기 때문에 약간의 대기 시간이 발생하고 애플리케이션 속도가 느려집니다.

여기에 Webpack의 힘이 있습니다. 응용 프로그램의 모든 파일을 조사합니다. 모든 것을 압축하고 축소한 다음 아래와 같이 제공합니다.

Typescript로 Webpack을 간단하게 사용

typescript와 함께 Webpack을 사용하는 것으로 시작합니다. 일부 종속성을 설치해야 합니다.

npm i -D webpack webpack-cli ts-loader typescript webpack-dev-server

이러한 종속성은 ts-loader 및 typescript 의 도움을 받아 typescript 코드를 javascript로 컴파일한 다음 webpack 를 사용하여 js 코드를 묶습니다.

웹팩 구성
webpack.config.js는 루트 디렉토리에 생성되어야 합니다.

이 구성 파일에서 가장 먼저 할 수 있는 일은 일반적으로 app.ts 또는 index.ts인 응용 프로그램의 항목 파일을 지정하는 것입니다.

module.exports = {
  entry: './src/app.ts'
}

이제 항목 파일 설정이 완료되었으므로 이 번들 파일의 위치와 방법에 대한 정보를 구성할 수 있습니다.
일반적으로 TypeScript 코드를 컴파일할 때 컴파일은 dist라는 폴더에 저장됩니다(이름을 바꿀 수 있음).
Webpack 구성과 동일하며 정확히 번들할 위치를 알아야 합니다. 따라서 번들 대상의 절대 경로를 설정합니다.

const path = require('path');

module.exports = {
  entry: './src/app.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist') 
}
}

모든 것을 설정한 후 Webpack은 이러한 TypeScript 파일을 컴파일하는 방법을 알아야 합니다. 모든 TypeScript 파일을 찾기 위해 Webpack에 대한 간단한 정규식을 설정할 수 있습니다. 설정 후 이전에 설치한 tsconfig.json가 다음과 같이 번들링 프로세스 중에 Javascript로의 컴파일을 처리하도록 지정합니다.

const path = require('path');

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

     }
  ]
}
}

모듈에 규칙을 추가하여 CSS 파일 또는 이미지와 같은 번들링 시 다른 파일 확장자에 대해 다른 사전 설정을 추가할 수 있습니다.

Webpack에 대해 자세히 알아보기: https://webpack.js.org/concepts/