[Webpack] Typescript 설정 추가

번들링을 할 때 타입스크립트도 처리할 수 있게 로더를 추가하면 됩니다.

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const mode = process.env.mode || 'development';
module.exports = {
  devtool: 'eval-cheap-source-map',
  mode,
  entry: {
    main: './src/app.ts',
  },
  output: {
    filename: '[name].js',
    path: path.resolve('dist'),
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify:
        process.env.NODE_ENV === 'development'
          ? false
          : { collapseWhitespace: true, removeComments: true },
    }),
    new CleanWebpackPlugin(),
    new CopyPlugin({
      patterns: [
        {
          from: 'node_modules/axios/dist/axios.min.js',
          to: './axios.min.js',
        },
        {
          from: 'node_modules/axios/dist/axios.min.map',
          to: './axios.min.map',
        },
      ],
    }),
  ],
  externals: {
    axios: 'axios',
  },
  devServer: {
    client: {
      overlay: true,
      logging: 'error',
    },
  },
};

dist 폴더에 위치한 번들링 파일을 노드 서버에서 app.use(express.static(path.resolve('../dist')))를 통해 웹 페이지를 띄웠습니다.