[React] 웹팩 데브 서버와 리엑트 핫 리로딩하기!

0. 웹팩 데브 서버 생성 & 핫 리로딩 설정

react를 직접 개발환경을 설정해주고 보면 작업을 할때마다 확인을 위해 계속 빌드를 반복해야하는
문제를 해결하기 위해 웹팩 데브 서버를 생성하고 핫 리로딩 설정을 하는 것 입니다.

1. react-refresh 및 plugin 설치

npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin

2. 개발용 서버(webpack-dev-server)

npm i -D webpack-dev-server

3. packgage.json script에 명령어 수정

"script": {
  "dev": "webpack server --env devrlopment",
},

4. webpack.config.js 수정

const path = require('path');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); 

module.exports = {
  mode: 'development',
  devtool: 'eval',
  resolve: {
    extensions: ['.js', '.jsx']
  },
  entry: {
    app: ['./client']
  },
  module: {
    rules: [{
      test: /\.jsx?/,
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            targets: {
              browsers: ['> 5% in KR'],
            },
            debug: true,
          }],
          '@babel/preset-react'
        ],
        plugins: ['react-refresh/babel',] // 바벨에 핫 리로딩 기능 추가
      },
    }]
  },
  plugins: [
    new RefreshWebpackPlugin(), // 핫 리로딩 기능 추가
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.js',
    publicPath: '/dist/',
  },
  devServer: {
    devMiddleware: { publicPath: '/dist/' }, // webpack이 생성해주는 파일의 경로
    static: { directory: path.resolve(__dirname) }, // 실제 존재하는 정적 파일들의 경로
    // 실제 존재하는 파일과 webpack이 생성해주는 경로의 파일의 결과물을 비교 후 수정
    hot: true, 
  }
}

5. npm run dev

npm run dev

앞서 추가한 명령어를 실행하면 로컬호스트:8080이 생성되고 정상적으로 변경사항이 적용이 됩니다.

 

참조
ZeroChoTV 리액트 웹게임 만들기