Webpack Dev Server 와 Hot Reloading

webpack : v5.65.0

webpack-cli : v4.9.1

 

Hot Reloading에 필요한 패키지 설치

react-refres : v0.11.0

@pmmmwh/react-refresh-webpack-plugin : v0.5.4

 

webpack-dev-server는 변경점을 저장하면 실시간으로 새로고침을 시켜준다

그 때 기존 데이터를 유지하기 위해 사용되는 패키지다.

yarn add react-refresh @pmmmwh/react-refresh-webpack-plugin -D

webpack-dev-server 설치

webpack-dev-serve : v4.7.2

webpack-dev-server는 변경점을 감지할 수 있음

yarn add -D webpack-dev-server

npm run dev 시 실행되는 명령어

// package.json

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

webpack 환경설정

const path = require('path');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); // 핫 리로드에 사용되는 플러그인 불러오기

module.exports = {
  name: 'word-relay-dev',
  mode: 'development',
  devtool: 'inline-source-map',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  entry: {
    app: './client',
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            targets: {browsers: ['last 2 chrome versions']},
            debug: true,
          }],
          '@babel/preset-react',
        ],
        plugins: ['react-refresh/babel'], // 바벨이 최신 문법을 옛날 javascript문법으로 transfy 할 때 핫 리로딩 기능까지 추가됨
      },
      exclude: path.join(__dirname, 'node_modules'),
    }],
  },
  plugins: [
    new ReactRefreshWebpackPlugin(), // 플러그인 장착 (빌드할때마다 실행됨)
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/dist',
  },
  devServer: {  // dev server 설정
    devMiddleware: { publicPath: '/dist' },
    static: { directory: path.resolve(__dirname) }, // 정적파일(index.html)의 경로
    // 최상위폴더가 아닌 하위폴더에 있다면 ( ex: static: { directory: path.resolve(__dirname,'src') } )
    hot: true
  }
};

 

이렇게 설정 하고

npm run dev

를 실행하면 http://localhost:8080/ 주소로 실행이 된다.

수정사항을 저장하면 실시간으로 반영이 돼서 개발할때 편하다.