Typescript + webpack 으로 .ts 파일 번들하기

우선 이하의 패키지들을 설치

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

ts-loader는 Typescript를 webpack에서 처리하기 위해 필요한 친구입니다.

 

package.json

{
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w"
  },
  "devDependencies": {
    "ts-loader": "^9.1.2",
    "typescript": "^4.2.4",
    "webpack": "^5.37.0",
    "webpack-cli": "^4.7.0"
  },
  "private": true
}

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "ES5",
    "module": "ES2015"
  }
}

특히 module에 es2015를 지정하는 것이 중요합니다.이를 지정하지 않으면 Typescript 코드의 import문과 export문이

컴파일러에 의해 Common JS 로 변환되기 때문에 webpack에 의한 Tree Shaking(미사용 import를 정적해석에 의해 떨쳐버리는 기능)의 이점을 얻을 수 없습니다 .Tree Shaking의 효과를 얻기 위해서는 명시적으로 ES Modules를 컴파일 옵션으로 지정합니다.

webpack.config.js

• rules에 *.ts 파일들은 ts-loader를 지정한다.
• resolve.extensions에 확장자.ts를 등록하는것으로 import문에서 .ts 확장자를 생략할 수 있다.
• webpack의 import문에서 컴파일이 잘 안될때, resolve.extensions를 배열로 안해서 잘 안되는 경우가 많으니깐 주의

module.exports = {
  mode: 'development',

  // 메인 스크립트 파일
  entry: './src/main.ts',

  module: {
    rules: [
      {
        // 확장자 .ts의 파일들은
        test: /\.ts$/,
        // ts-loader로 컴파일 하겠다.
        use: 'ts-loader',
      },
    ],
  },
  // import 문에서 .ts 확장자를 생략해도 되게하기 위해서
  // 이걸 정의안하면 import "" from .ts를 적어야한다
  // 실무에서는 import 문에서 확장자를 생략하는것이 많아서
  // 왜 생략해도 되는지 인식해두는게 좋다.(혹시나 관련 버그가 발생할지도 모르니껜)
  resolve: {
    // 확장자를 배열로 넣어둠
    extensions: [
      '.ts', '.js',
    ],
  },
};