babel-loader질문입니다! 왜쓰는지 궁금합니다!

react-typescript강좌 끝말잇기 부분에서 미래에서 온 제로초님께서

webpack.config.ts파일에 추가하라고 하신 babel-loader에 관해서 질문이 있습니다.

module설정하는 부분에 babel-loader를 추가해주었는데 버전이 업데이트 되면서 왜 이 로더를 추가해야될까요??

그리고 에러를 해결하는 과정에서 질문이있습니다. module.rules 부분에 순서는 상관없다고 생각해서 ts-loader설정을 먼저 적고 babel-loader를 적어주었습니다. 그러나 아래와 같이 오류가 떳습니다

그러나 설정 순서를 바꿔주었더니 해결이 되었는데 어떤 처리과정이 있길래 이 순서를 바꿔주어서 해결을 할 수 있게됬는지 의문입니다.

아래는 해결되서 적어놓은 webpack.config.ts파일입니다!

import path from 'node:path';
import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const config: Configuration = {
  name: 'word-relay-dev',
  mode: 'development', //after production
  devtool: 'eval',
  resolve: {
    extensions: ['.jsx', '.js', '.tsx', '.ts'],
  },
  entry: {
    app: './client'
  },
  module: {
    rules: [
      {
        loader: 'babel-loader',
        options: { plugins: ['react-refresh/babel'] },
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: path.join(__dirname, 'node_modules'),
      },]
  },
  plugins: [
    new ReactRefreshPlugin(),
    new ForkTsCheckerWebpackPlugin()
  ],
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist/',
  }, devServer: {
    devMiddleware: { publicPath: '/dist' },
    static: { directory: path.resolve(__dirname) },
    hot: true
  }


}

export default config;