React Refresh 설치 및 설정

모듈 설치

npm i -D react-refresh // 
npm i -D @pmmmwh/react-refresh-webpack-plugin // webpack 설정시 필요

webpack 개발 서버 설치

npm i -D webpack-dev-server 

pacagke.json 설정

"scripts" : {
	"dev" : "webpack server --env development"
}

webpack.config.js

import RefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"

---

babel-loader의 plugins 설정

'react-refresh/babel'

전체 plugins 설정

plugins : [
  new ReactRefreshWebpackPlugin()  
]

devServer 설정

devServer: {
  puvlicPath: '/dist/',
  hot : true,
}

---

---

---

전체 코드 (webpack.config.js)

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

module.exports = {
    name: 'wordrelay-setting',
    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 ReactRefreshWebpackPlugin()
    ],
    output : {
        path : path.join(__dirname + '/dist'),
        filename : 'app.js',
        publicPath : '/dist/'
    }, //출력
    devServer: {
        index: 'wordrelay.html',
        publicPath : '/dist/',
        hot: true,
        historyApiFallback: {  // 아래에 참고 있음
            index: 'wordrelay.html'
        }
    }

}

이 부분은 index.html이 아닌 다른 곳으로 시작페이지를 돌려주기 위함이다.

historyApiFallback: {
            index: 'wordrelay.html'
        }

참고:
publicPath option은 express의 url option하고 같은 역할을 한다.
해당 키를 이용하여 브라우저에서 접근할 수 있다.