06. 웹팩(Webpack) Typescript 연동

in Frontend

웹팩과 타입스크립트를 연동한다. 웹팩 3번 포스팅에 이어서 작성

npm i typescript awesome-typescript-loader

  • webpack.dev.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  entry: {
      main: ["./src/main.js"],
      ts: ["./src/index.ts"]  // ts파일을 추가하자!
  },
  ...
  module: {
    rules: [
      ...
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "awesome-typescript-loader" // loader를 추가
          }
        ],
      },
      ...
  • tsconfig.js

타입스크립트 컴파일 설정 파일이다!

1
2
3
4
5
6
7
8
9
10
11
{
    "compilerOptions": {
        "module": "commonjs", // commonjs 모듈 방식 사용
        "moduleResolution": "node", // node_modules폴더에서 모듈 검색
        "target": "es5", // es5 코드로 컴파일
        "allowJS" : true, // JS파일 포함 허용
        "lib": ["es5", "es6", "dom"], // 컴파일을 위한 라이브러리
        "sourceMap" : true, 
        "experimentalDecorators": true, // 데코레이터 허용
    },
}
  • index.ts
1
2
3
4
function Greeting(greeting: string) {
    console.log(greeting)
}
Greeting('lala')

타입스크립트 연동 완료.

Reference

https://www.udemy.com/webpack-beyond-the-basics/

Comment and share

Author's picture

Junho Nam

enjoy while living


full stack web developer


Seoul, Korea