//tsconfig.json
{
"compilerOptions": {
"strict": true,
"lib": [
"ES5",
"ES2015",
"ES2016",
"ES2017",
"DOM"],
"jsx": "react"
}
}
extensions : 허용할 파일 형태
entry : webpack으로 묶을 파일경로
output :
- filename : [name].js 로 entry에 있는 파일을 묶음 ([name]은 entry의 app을 읽어 app.js로 변경)
- path : 묶은 파일의 경로
rules : tsx 파일은 awesome-typescript-loader로 옛날 파일로 변경할것을 세팅
//webpack.config.js
const path = require('path');
const webpack = requrie('webpack');
module.exports = {
mode: 'development', //production
devtool: 'eval', //production으로 변경시 hidden-source-map
resolve: {
extensions: ['.jsx', '.js', '.tsx', '.ts']
},
entry: {
app: './client'
},
module: {
rules: [{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
}]
},
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist') // /dist/app.js에 생성
}
}
React의 경우 commonJs로 만들어졌기때문에 다음과 같은 형식으로 import 해줘야한다.
//client.tsx
import * as React from 'react';
import * as ReactDom from 'react-dom';
d.ts 파일에서 commonJs 형식으로 되어있을 경우(ex: export = React;) 아래와 같은 써줘야한다.
만약 exports default가 선언이 되있는 경우
import React from 'react'; 로 import 가능하다.