WebPack을 이용한 Typescript 번들링

1. 패키지 설치

typescript ts-loader 설치

yarn add typescript ts-loader@8.2.0

 

2. Webpack 옵션파일 수정

// webpack.config.js
const path = require("path");

module.exports = {
    mode: "development",
    // mode: "production",
    entry: ["@babel/polyfill", "./src/index.ts"],

    output: {
        path: path.resolve(__dirname, "dist"),
        publicPath: "/dist/",
        filename: "bundle.js",
    },
    
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.join(__dirname),
                exclude: /(node_modules)|(dist)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"],
                    },
                },
            },
            {
                test: /\.ts$/,
                use: "",
                exclude: /node_modules/,
                use: ["ts-loader"],
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.s[ac]ss$/i,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
        ],
    },
    
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
};

- 기존의 js만 있던 rule에서 ts추가

- entry의 시작을 index.ts로 수정

- resolve 추가

 

3. 타입스크립트 옵션파일 생성

tsconfig.json 파일 생성

// tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "moduleResolution": "node",
        "outDir": "dist",
        "baseUrl": ".",
        "sourceMap": true,
        "downlevelIteration": true,
        "noImplicitAny": false,
        "paths": {"*":["node_modules/*"]}
    },
    "include": ["src/**/*"]
}

 

4. ts파일 생성

index.ts 파일 생성

//index.ts
import {testMakePerson} from "./Types/makePerson";

require("./style/style.scss");
require("./style/style.css");

testMakePerson();

Types/makePerson.ts 파일 생성

//makePerson.ts
export function makePerson(name: string, age: number) {
    return {name, age};
}

export function testMakePerson() {
    console.log(makePerson("Jane", 22), makePerson("Jack", 23));
}

 

5. 폴더구조

전체적인 폴더구조는 다음과 같습니다.