webpack DevServer와 Hot Reload 설정 방법

나나콘·2024년 10월 10일

1. 웹팩 DevServer와 Hot Reload를 사용하는 이유

React로 개발할 때, 코드 변경 사항을 확인하려면 수동으로 빌드를 반복해야 하고, 이는 시간이 많이 소요되는 작업입니다. 이러한 반복적인 작업을 자동화하여 시간을 단축하기 위해 webpack-dev-server와 hot reload를 설정합니다.

webpack-dev-server를 설치하고 개발 환경에서 서버를 실행합니다.
hot reload 설정을 통해 변경된 내용을 자동으로 반영할 수 있도록 합니다.

2. 🛠️ 설정 절차

먼저, react-refresh-webpack-plugin을 설치하여 React 컴포넌트의 hot reload를 지원합니다.

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

3. ⚙️ webpack-dev-server 설치

npm install -D webpack-dev-server

4. 🗂️ package.json 수정

package.json의 scripts 항목을 다음과 같이 수정하여 webpack-dev-server를 사용한 개발 환경 명령어를 추가합니다.

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

참고: webpack-cli v4 이상 버전에서는 webpack-dev-server 실행 명령어가 webpack-dev-server에서 webpack serve로 변경되었습니다.

📝 5. webpack.config.js 파일 설정

webpack.config.js 파일에서 hot reload 및 개발 서버를 설정합니다.

const path = require('path'); // path 모듈 import 추가
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  mode: 'development', // mode 설정 추가
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/, // node_modules 제외
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['react-refresh/babel'], // react-refresh 플러그인 추가
          },
        },
      },
    ],
  },
  plugins: [
    new RefreshWebpackPlugin(), // react-refresh 플러그인 추가
  ],
  devServer: {
    devMiddleware: { publicPath: '/dist' }, // 빌드 결과물 위치 설정
    static: { directory: path.resolve(__dirname, 'src') }, // 정적 파일 경로 설정 (예: 'src')
    hot: true, // hot reload 활성화
    liveReload: false, // liveReload 설정 (옵션)
    port: 3000, // 개발 서버 포트 설정 (선택 사항)
  },
};

🔄 6. Hot Reload와 Reload의 차이

Hot Reload
- 코드가 변경될 때 전체 페이지를 새로고침하지 않고, 변경된 부분만 리로딩합니다.
- 컴포넌트의 상태(state)나 DOM 구조를 유지하면서 코드 변경 사항을 반영할 수 있어, 개발 생산성이 향상됩니다.
- React에서 react-refresh 플러그인을 활용하여 컴포넌트 상태를 유지하며 리로딩이 가능합니다.
Live Reload
- 코드가 변경되면 전체 페이지를 새로고침하여 모든 내용을 다시 렌더링합니다.
- 상태(state)나 DOM 구조가 모두 초기화되므로, 컴포넌트의 기존 상태를 잃게 됩니다.
- liveReload 옵션을 false로 설정하면, 전체 페이지 새로고침 없이 hot reload만 적용됩니다.

devServer: {
  devMiddleware: { publicPath: '/dist' },
  static: { directory: path.resolve(__dirname, 'src') }, // 정적 파일 경로 예시
  hot: true, // hot reload 활성화
  liveReload: false, // liveReload 비활성화 (hot reload 적용을 위해)
},

💾 7. 빌드 결과물 관리

webpack-dev-server는 빌드 결과물을 실제 디스크에 저장하는 대신 메모리에 저장하여, 개발 서버를 빠르게 제공하고 파일 변경 시 바로 반영될 수 있도록 합니다.

⚙️ 8. 기타 설정 옵션

Hot reload를 적용했음에도 불구하고 페이지가 새로고침 된다면, liveReload 옵션을 false로 설정하여 해결할 수 있습니다.

devServer: {
  devMiddleware: { publicPath: '/dist' },
  static: { directory: path.resolve(__dirname, 'src') }, // 정적 파일 경로 예시
  hot: true, // hot reload 활성화
  liveReload: false, // liveReload 비활성화 (hot reload 적용을 위해)
},