frontendDevEnv

webpack typescript 적용하기

react, typescript, webpack
Views: 112

시작하기

이전 포스트를 통해 Babel과 webpack 기본 설정을 했습니다.
이번 포스트에서는 기본설정에서 typescript를 적용하겠습니다.

설치하기

1
npm install --save-dev @types/react @types/react-dom typescript ts-loader

타입스크립트 관련 패키지를 설치해줍니다.

1
npx typescript --init

다음 스크립트를 입력하면 tsconfig.json 파일이 생성됩니다.

tsconfig.json
1
2
3
4
5
6
7
8
{
  "compilerOptions": {
    //...
    "jsx": "react",
    "sourceMap": true,
    //...
  }
}

jsx 설정을 react로 설정해줍니다.

설정하기

webpack 설정파일을 수정합니다.

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//...
module.exports = {
  entry: "./src/index.tsx",
  //...
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  module: { // 로더
      rules: [
        //...
        {
                test:/\.(ts|tsx)$/,
                exclude: /node_modules/,
                include: srcPath,
                loader: "ts-loader",
        }
      ]
  }
}
//...

js혹은 jsx를 ts 혹은 tsx 확장자로 변경합니다.

1
npm run start

프로젝트를 실행시킵니다.

실행

Share