Webpack typescript

Webpack setting for TypeScript

1. Download typescript and awesome-typescript-loader

2. Webpack config 파일에 entry 추가하기

    entry: {
        main: ["./src/main.js"],
        ts: ["./src/index.ts"]
    },

3. src/index.ts 생성하기

4. Webpack config 파일에 module’s rule 추가하기

            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader'
                    }
                ],
                exclude: /node_modules/
            },

5. tsconfig.json 파일만들기

tsconfig.json는 ts를 컴파일하기 위한 룰을 설정하는 곳.

{
    "compilerOptions": {
        "module": "commonjs",
        "moduleResolution": "node",
        "target": "es5",
        "allowJs": true,
        "lib": ["es5", "es6", "dom"],
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

Setting TypeScript with React

1. Create with create-react-app

2. Install packages

npm i --save-dev typescript @types/node @types/react @types/react-dom

3. App.js를 App.tsx 파일로 변경