WEBPACK - 2 ( dev server / hot reloading )

 

WEBPACK

웹팩 수업을 듣다가 리로딩과 다른 핫 리로딩이란 개념을 배우게 되었습니다.

개발에서 유용할 것 같아서 블로그에 올리게 되었습니다.

 

 

 

0. Hot Reloading이란?

• 애플리케이션의 상태를 유지하면서 코드의 변경사항만을 실시간으로 반영합니다.
• 컴포넌트가 여러개 있을 경우 수정한 컴포넌트(모듈)만을 교체해서 기존의 작업을 유지하면서 업데이트할 수 있습니다.

 

 

 

1. 기존 리로딩과의 차이점?

• 리로딩은 파일이 변경점을 인지하고 반영해주는 것은 같을 수 있으나 새로고침을 해준다는 것이 다릅니다.
• 그렇다보니 리로딩은 기존 데이터가 날라갑니다.
• 리로딩은 여러개의 컴포넌트가 있고 테스트 중이거나 화면을 유지한채로 변경된것만 빠르게 확인하면서 작업을 진행하기 어렵습니다. 
• 이러한 불편함을 극복하기 위해 나온 핫 리로딩 입니다.

 

 

 

2. 설치

핫 리로딩을 위한 플러그인 모듈 설치

// webpack.config.js
npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin

 

핫 리로딩을 위한 개발서버 모듈 설치

// webpack.config.js
npm i -D webpack-dev-server

 

 

반응형

 

 

3. webpack.config.js 설정

예시 부분 코드

// @pmmmwh/react-refresh-webpack-plugin 플러그인 적용 하기

// 플러그인 추가
const refreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

// 플러그인 적용
plugins: ['@pmmmwh/react-refresh-webpack-plugin']



// react-refresh 플러그인 적용하기
module: {
	rules: [
        {
        	test: /\.jsx?$/,
            loader: 'babel-loader',
            options: [
            	['@babel/preset-env', {
                	targets: {
                    	browers: ['> 5% in KR']
                    }
                }],
                '@babel/preset-react'
            ],
            plugins: ['babel-refresh/babel']
        }
    ]
}



// dev-server 적용하기
devServer: [
	devMiddleware: {publicPath: '/dist'},
    static: {directory: path.resolve(_dirname)},
    hot: true,
    liveReload: false,
]

 

 

예시 총 코드

// webpack.config.js
const path = require("path");
const refreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); // 핫 리로드용 플러그인 2

module.exports = {
    name: "word-relay-setting",
    mode: "development", // 운영에서는 production
    devtool: "eval",  // 운영에서는 hidden-source-map
    resolve: { // webpack에서 모듈을 해석하는 방법
        extensions: [".js", ".jsx"], // webpac에서 모듈 해석할때 고려할 확장자
    },

    entry: {
        app: "./client",
    }, // 읽을 파일 (입력)
    module: { // 읽을 파일에 적용할 모듈들
        rules: [
            {
                test: /\.jsx?$/, // 적용할 파일의 확장자
                loader: "babel-loader", // 로더 이름
                options: {
                    presets: [ // plugin들의 모임이 preset입니다. preset 목록
                        [
                            "@babel/preset-env",
                            {
                                targets: { // 적용할 브라우저 목룍
                                    browsers: ["> 5% in KR"], // // browserslist 참고
                                },
                                debug: true,
                            },
                        ],
                        "@babel/preset-react",
                    ],
                    plugins: ["react-refresh/babel"], // 핫 리로드용 플러그인 1
                },
            },
        ],
    },
	plugins: [new refreshWebpackPlugin()], // 핫 리로드용 플러그인 2
    // 모듈에 적용 후 혹은 같이 적용할 플러그인
    output: {
        filename: "app.js",
        path: path.join(__dirname, "dist"), // 실제의 경로
        publicPath: "/dist", // 가상의 경로 webpack-dev-server가 사용하는 결과물간의 상대 경로
    }, // path.join:경로를 알아서 합쳐줌 // __dirname:현재경로
     // 번들된 파일 이름과 주소 (출력)
    devServer: { // 핫 리로딩을 위한 개발서버
        devMiddleware: { publicPath: "/dist" }, // 웹팩이 빌드한 파일들이 위치하는 곳의 경로, dev서버인경우엔 메모리에다가 생성 (나중에 웹팩이 생성해주는 경로)
        static: { directory: path.resolve(__dirname) }, // 실제 존재하는 정적 파일들의 경로(index.html) 인덱스 파일 위치 옮길시, 위치를 적어주면 된다. (실제로 존재하는 파일 경로)
        hot: true,
        liveReload: false,
    }, // 개발서버를 작업하는 동안엔 메모리에서 dist폴더를 생성하기 때문에 개발서버로 작업할때 dist파일이 없다. 
};

 

 

 

추가 정보

path.join / path.resolve 차이점

• path.join : 인수로 주어진 경로들을 단순히 연결하여 하나의 경로로 만듭니다. (절대경로, 상대경로 가능)
• path.resolve : 인수로 주어진 경로들을 해석해서 상대 경로를 절대 경로로 "해석"하여 반환합니다.

 

entry에서는 상대경로 output에서는 path.join 사용하는 이유?

• 웹팩의 entry 옵션은 모듈의 시작점을 정의하기 위해 사용되고, 상대경로를 통해 지정할 수 있습니다.
• 반면 output 옵션에서는 번들링된 파일이 저장될 위치를 정의해야 하며, 이는 파일 시스템에서 정확한 위치를 명시해야 하기 때문에 절대경로를 사용합니다.
• path.join() 함수는 여러 인자를 모두 연결해 하나의 경로를 생성하는 데 사용되며, 절대경로뿐만 아니라 상대경로에서도 사용될 수 있습니다.
• 이 함수의 주된 장점은 운영체제별로 다를 수 있는 경로 구분자를 자동으로 처리해 주어, 크로스 플랫폼 호환성을 신경 쓰지 않아도 되도록 해줍니다.
• path.join의 주된 장점은 운영체제별로 다를 수 있는 경로 구분자를 자동으로 처리해 주어, 크로스 플랫폼 호환성을 신경 쓰지 않아도 되도록 해줍니다.

 

 

 

4. 실행 / 실행방법

package.json 파일에 코드 추가

// package.json

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

 

커멘드 라인에 명령어 입력

npm run dev

 

 

 

 

 

 

 

 

 

 

참조!

https://www.inflearn.com/course/lecture?courseSlug=web-game-react&unitId=21574&tab=curriculum&category=questionDetail

학습 페이지