<리액트 기초> 웹팩 데브서버와 핫 리로딩

- 기존에는 소스코드를 고칠 때마다 다시 빌드를 진행했어야 했다. 하지만 이런 일은 매우 번거롭고, 자동으로 빌드가 되기를 원한다. 

 

 - 그래서 이 장에서는 실시간으로 빌드가 되는 핫리로딩에 대해서 알아보자.

 

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

 

 - 핫리로딩을 위해서는 위와 같이 리액트 리프레시와 리프래시 웹팩 플러그인이 필요하다.

 

npm i -D webpack-dev-server

 

 - 리로딩을 위해서 개발용 서버가 필요하므로 웹팩 데브 서버를 설치한다.

 

 - 그리고 기존에 packge.json파일 스크립트에 webpack만 작성했었던 대신 webpack serve --env development로 변경해 준다.

 

 - 이제 위에서 받은 플러그인들을 webpack.config.js에 require시켜서 적용시키자.

 

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


module.exports = {
    name: 'word-relay-setting',
    mode: 'development', //실서비스 : production
    devtool: 'eval',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    
    entry: {
        app: ['./client'],
    }, // 입력

    module: {
        rules: [{
            test: /\.jsx?/,
            loader: 'babel-loader',
            options: {
                presets: [
                    ['@babel/preset-env', {
                    targets: {
                        browsers: ['> 1% in KR'],
                    },
                    debug: true,
                }],
                 '@babel/preset-react',
                ],
                plugins: [
                    '@babel/plugin-proposal-class-properties',
                    'react-refresh/babel',
                ]
            }
        }],
    },
    plugins:[
        new RefreshWebpackPlugins()
    ],

    output: {
        path: path.join(__dirname, 'dist'), //A:\Documents\Github...
        filename: 'app.js',
        publicPath: '/dist/',
    }, // 출력
    devServer: {
        publicPath: '/dist/',
        hot: true,
    },
};

 

 - 코드를 보면 바벨로더의 플러그인에 react-refresh/babel을 넣어서 바벨이 작동할 때 핫리로딩 기능까지 실행하도록 하였다.

 

 - dev서버 설정도 별도로 필요한데 publicPath를 작성하여 output과 동일하게 두면된다. 여기서 path는 실제 경로이고, publicPath는 가상의 경로이다. 웹팩 데브서버가 사용하는 결과물 간의 상대경로라고 생각하면 된다.

 

 - 이제 웹팩데브서버는 빌드가 되면 publicpath에 결과를 저장한다. 데브서버의 핫리로딩 기능은 소스코드의 변경점을 알아채고 바로바로 수정을 시킬 것이다.

 

 - 빌드를 시켜보면 localhost:8080 주소에서 돌아간다고 뜨므로 주소창에 입력하면 접속가능하다.

 

 - 참고로 웹팩 데브서버는 변경점이 있으면 있으면 새로고침 시 바로 반영이 되긴한다.(리로딩) 우리는 여기에 리프래시와 리프래시 웹팩 플러그인을 추가하여 새로고침없이 데이터가 그대로 유지되는 핫리로딩을 가능하게 하였다. 

 

 

 

 

---

 

 

 

 

참고

 

 

이 글은 ZeroCho 님의 리액트 무료 강좌를 수강하며 개인적으로 정리하며 쓰는 글입니다.

 

 

 

 

인프런

웹 게임을 만들며 배우는 React - 인프런

 

유튜브

리액트 무료 강좌(웹게임)