React 에 typescript 적용 후 webpack에 react-refresh 세팅하는법

webpack에 react-refresh 적용하기

1) 리엑트에 타입스크립트 적용한후 파일을 고칠떄마다 계속 빌드해줘야하는 번거로움이 있어 리엑트 핫 로딩기능을 적용하려한다.

npm i -D
@babel/core
@types/webpack
@types/webpack-dev-server
ts-node
fork-ts-checker-webpack-plugin
babel-loader
react-refresh
webpack-dev-server
@pmmmwh/react-refresh-webpack-plugin

@types/webpack
@types/webpack-dev-server
@babel/core : babel-core: 웹팩용 바벨(?)이다. 터미널에서 쓸 때 babel-cli를 썼는데 이걸 웹팩에서 사용하는 용도다.
ts-node : ts-node는 Node.js용 TypeScript 실행 엔진 및 REPL입니다.
fork-ts-checker-webpack-plugin : 별도의 프로세스에서 TypeScript 유형 검사기를 실행하는 Webpack 플러그인입니다.
babel-loader : 이 패키지를 사용하면 Babel 및 webpack을 사용하여 JavaScript 파일을 변환할 수 있습니다 .
webpack-dev-server :  nodemon과 같이 웹팩 환경에서 개발서버를 생성
리액트 리프레쉬 사용
react-refresh
@pmmmwh/react-refresh-webpack-plugin

 

 

 

 

webpack.config.ts

import path from 'path';
import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import { Configuration } from 'webpack';
 
const config: Configuration = {
  name: 'number-baseball-dev',
  mode: 'development',
  devtool: 'eval',
  resolve: {
    extensions: ['.js', '.jsx', '.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: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/dist',
  },
  devServer: {
    devMiddleware: { publicPath: '/dist' },
    static: { directory: path.resolve(__dirname) },
    hot: true,
  },
};
export default config;