TypeScript에서 Webpack과 Babel를 사용하도록 하는 설정을 다룹니다.

webpack과 babel의 자세한 내용은 아래 링크에서 확인해보세요.

Webpack & Babel 다루기

Webpack 설치 및 설정

npm install -D webpack webpack-cli webpack-dev-server

npm install -D html-webpack-plugin

npm install -D babel-loader

• webpack-cli : webpack을 커맨드라인에서 사용할 수 있게 해주는 도구
• webpack-dev-server : 코드 변경마다 빌드된 결과물을 확인할 수 있는 개발용 서버를 제공
• html-webpack-plugin : webpack 번들을 제공하는 HTML 파일 생성
• babel-loader : 웹팩이 모듈을 번들링할 때 바벨을 사용하도록 설정하는 로더

wpeback.config.js 설정

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

module.exports = {
  mode: "development",
  entry: "./index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
  },
  module: {
    rules: [
      {
        test: /\\.(js|ts)?$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html"
    })
  ]
};

Babel 설치 및 설정