Webpack TypeScript

등록일: 2019-02-05

수정일: 2019-02-05

Basic Setup

npm install --save-dev typescript ts-loader

project

  webpack-demo
  |- package.json
+ |- tsconfig.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
    |- index.js
+   |- index.ts
  |- /node_modules

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

webpack.config.js

const path = require('path');

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

Loader

이 예제에서는 ts-loader를 사용합니다.

Source Maps

소스 맵을 사용하려면 컴파일 된 JavaScript 파일에 인라인 소스 맵을 출력하도록 다음과 같이 tsconfig.json을 수정해야 합니다.

  {
    "compilerOptions": {
      "outDir": "./dist/",
+     "sourceMap": true,
      "noImplicitAny": true,
      "module": "commonjs",
      "target": "es5",
      "jsx": "react",
      "allowJs": true
    }
  }

이제 웹팩설정에서 source map을 따로 추출하도록 다음과 같이 설정해야합니다.

  const path = require('path');

  module.exports = {
    entry: './src/index.ts',
+   devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

Using Third Party Libraries

써드파티를 설치할 때 typing definition을 설치해야 합니다.
이런 타입들은 TypeSearch에서 찾아 볼 수 있습니다.
만약 loadsh를 설치하고 싶다면 다음과 같이 설치할 수 있습니다.

npm install --save-dev @types/lodash

Importing other Assets

TypeScript로 다른 코드가 아닌 자원을 사용하기위해 type을 만들어줘야 합니다.
그러기 위해서는 custom definition을 만들어줘야 하는데 다음과 같이 만들 수 있습니다.

custom.d.ts

declare module "*.svg" {
  const content: any;
  export default content;
}

Source

https://webpack.js.org/guides/typescript/

자바스크립트로 직접 만들면서 배우는 - 자료구조와 알고리즘 강의 바로 가기
실습으로 마스터하는 OAuth 2.0: 기본부터 보안 위험까지 - OAuth 2.0 강의 바로 가기
기계인간 이종립, 소프트웨어 개발의 지혜 - Git 강의 바로 가기

코드숨에서 매주 스터디를 진행하고 있습니다. 메일을 등록하시면 새로운 스터디가 시작될 때 알려드릴게요!