• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

23.04.14 01:55 작성 조회수 364

0

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;

답변 1

답변을 작성해보세요.

0

조현영님의 프로필

조현영

지식공유자

23.04.14 02:28

사실 이 강좌도 연식이 좀 된지라 이제는 ts-loader만 해도 됩니다. 여기서는 react-refresh/babel을 쓰려고 같이 썼습니다.

모듈 순서는 매우 중요합니다. 그 역순서대로 처리되니까요. ts-loader가 ts를 js로 바꾼 뒤에 babel-loader가 핫 리로딩을 붙입니다.