웹팩과 타입스크립트를 연동한다. 웹팩 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/