[React] Webpack dev server와 핫 리로딩

개발용 서버 설치

npm i -D webpack-dev-server

scripts 명령어 수정

package.json

 "scripts": {
    "dev": "webpack serve --env development"
  },

핫 리로딩 설치

리로딩과의 차이점 : 핫 리로딩은 기존 데이터를 유지하면서 화면을 바꿔준다.

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

webpack.config.js

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

...
options: {
                presets: [
                    ...
                ],
                plugins: [
                    '@babel/plugin-proposal-class-properties',
                    'react-refresh/babel',
                ],
            },
        }],
    },
    plugins: [
        new RefreshWebpackPlugin(),
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js',
        publicPath: '/dist/', //webpack-dev-server가 사용하는 결과물간의 상대 경로 
    }, //출력
    devServer: { //devServer 설정
        publicPath: '/dist/',
        hot: true,
    },

설정이 모두 끝나면 npm run dev 후

해당 주소로 접속하면 변경사항이 실시간으로 반영되는 것을 볼 수 있다.

consol창에서도 확인가능.
Hot Module Reload

Webpack Dev Server