타입스크립트 설정 (tsconfig.json,webpack.confing.js)

타입스크립트의 문법은 공부했고 실제 프로젝트에서 어떻게 사용하는지 배우기 위해 우아한테크코스 점심 뭐먹지 미션의 코드를 참고했다.

웹팩의 용도

해당 프로젝트를 살펴보면, 타입스크립트를 설정하는 tsconfig.json뿐만 아니라 webpack.config.js 파일도 설치되어 있는 것을 알 수 있다.이번에 코드를 참고하면서 webpack의 용도를 더 구체적으로 알 수 있었다.

어떤 라이브러리,프레임워크를 쓰던지 최종적으로는 하나의 js파일로 결합된 다음 html에 포함되어야 한다. 하지만 타입스크립트로 개발을 하면 ts파일에 코드를 작성하고, 여러개의 모듈로 나눠서 개발을 하게 된다. 이를 js파일로 컴파일링하고, 하나의 js파일로 묶어주는 것이 웹팩이라는 번들러의 용도인 것이다.

npm run build 명령어를 통해 최종으로 실행할 js파일을 번들링 할 때, webpack의 로더 중 ts-loader가 tsconfig.json에 입력된 컴파일 옵션에 따라 ts파일을 컴파일한 다음, 설정해둔 디렉토리에 번들링 된 파일을 생성하는 것이다.

tsconfig.json

먼저 타입스크립트의 설정 파일인 tsconfig.json 파일을 살펴본 다음 webpack.config.js파일을 살펴보려 한다.

{
  "compileOnSave": true,
  "compilerOptions": {
    "incremental": true,
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "outDir": "dist",
    "allowJs": true,
    "sourceMap": false,
    "noEmit": false,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "cypress", "dist"]
}

compileOnSave : 파일 저장 시 컴파일 여부
compilerOptions : 컴파일러 관련 옵션
incremental : 증분 컴파일을 통해 컴파일 속도를 증가시킨다.
target : 출력 코드의 ECMAscript 버전을 지정한다. (ES5,ES6,ESNext 등)
lib : 프로젝트에서 사용할 라이브러리를 지정한다. dom,dom.iterable과 esnext로 최신 es문법과 dom 관련된 기능을 사용한다.
module : 모듈 코드 생성 방법을 지정한다. commonJS나 ES를 선택할 수 있다. 여기선 esnext로 최신 es문법을 따른다.
resolveJsonModule : JSON파일을 모듈로 로드할 수 있는 옵션
outDir : 컴파일된 파일이 생성될 디렉토리를 지정한다.
allowJs : 자바스크립트 파일을 타입스크립트 파일에 불러올 수 있게 한다.
sourceMap : 소스 맵 생성 여부를 지정한다.
noEmit : 타입스크립트 컴파일러가 자바스크립트 파일을 생성할지 여부를 지정한다. true일 경우 생성하지 않고 false일 때 파일을 생성한다.
esModuleInterop : CommonJs 모듈과 ES모듈을 상호 운용하게 해준다.
forceConsistentCasingInFileNames : 파일 이름의 대소문자를 일관되게 사용한다.
strict : 엄격한 타입 검사 여부를 지정한다.
skipLibCheck : 라이브러리 유형 선언 파일 검사를 건너뛴다.

include: 컴파일할 대상에 포함할 파일,디렉토리를 지정한다.
exclude: 컴파일할 대상에 제외할 파일,디렉토리를 지정한다.

sourceMap

소스맵은 타입스크립트 코드를 컴파일하면 생성되는 자바스크립트 코드와 원본 타입스크립트 코드의 매핑 정보를 포함하는 파일이다. 이 매핑 정보를 사용하면 디버깅 중에 JavaScript 코드의 실행 위치를 원본 TypeScript 코드의 위치로 매핑할 수 있다.

간단하게 말해, 최종으로 빌드한 자바스크립트 파일을 브라우저가 실행했을 때 오류가 발생하면 해당 오류가 원본 타입스크립트 코드의 어느 라인에서 발생한 오류인지를 알려주는 역할을 하는 것이다.

여기선 sourcemap 설정이 false로 되어 있는데, 이는 밑에서 살펴볼 webpack의 설정 때문이다.
webpack에서 번들링하는 과정에서 sourcemap을 생성하기 때문에 typescript를 컴파일하는 과정에선 sourcemap을 생성하지 않도록 설정한 것이다.

webpack.config.js

webpack은 작성한 타입스크립트를 하나의 파일로 번들링 하기 위해 사용한다.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  resolve: {
    extensions: [".ts", ".js", ".mjs"],
  },
  module: {
    rules: [
      {
        test: /\.(js|mjs|ts)$/i,
        exclude: /node_modules/,
        use: {
          loader: "ts-loader",
        },
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
  devtool: "inline-source-map",
  devServer: {
    static: "./dist",
    hot: true,
    open: true,
  },
};

mode : 빌드 모드를 설정한다.
entry : 번들링의 시작점이 되는 파일을 지정하는 옵션이다. 이 파일에 번들링하고자 하는 파일을 모두 import한 다음 번들링을 통해 하나의 파일로 통합하는 것이다.
output :
filename : 번들링된 파일의 파일명을 설정한다.
path : 번들링된 파일이 저장되는 디렉토리를 설정한다.
clean : 이전 빌드 결과물을 자동으로 제거한다.

resolve
extensions : 모듈을 해석할 때 인식할 확장자를 설정한다.

module
rules
test : 정규표현식을 통해 로더에 해당되는 파일명을 체크한다.
exclude : 로더에 제외시킬 파일이나 디렉토리를 설정한다.
use : 사용할 로더의 종류를 지정한다. 여기선 타입스크립트를 사용하기 때문에 ts-loader를 사용한다.
css파일일 경우 style-loader,css-loader를 사용하며 이미지 파일은 file-loader를 사용한다.
file-loader의 옵션에 있는 name : "[name].[ext]"는 "파일명.확장자"를 뜻한다. 이 설정은 기존의 파일명과 확장자를 그대로 유지한다.

plugins : 사용할 플러그인을 지정한다.
HtmlWebpackPlugin : webpack으로 번들링 시 HTML 파일을 생성하고 번들링 된 Javascript파일을 추가하는 플러그인이다.
template: 생성할 HTML 파일의 템플릿 파일을 지정한다.

devtool : 디버깅 시 소스맵을 포함하는 방식을 설정한다. inline-source-map의 경우 인라인으로 소스맵을 포함한다.