핫모듈 리플레이스먼트(HRM)

웹팩 개발서버는 개발중 코드를 수정했을시 이를 감지하여 화면을 자동으로 새로고침 해주기떄문에 편리하다. 하지만 전체화면을 업데이트하게되면 기존에 작성된 데이터가 초기화되기때문에 개발중 불편한 경우가 있을수 있다. 따라서 이를 보완하여 내가 수정한 모듈만 업데이트 시켜주는 기능을 웹팩 개발 서버에선 HRM(hot module Replacement)를 통해 제공한다.

설정방법

웹팩 설정파일중 devServer에서 hot : true로 설정해준다.

module.exports = {
  devServer = {
    hot: true,
  },
}

이렇게 설정하면 웹팩 개발 서버에서 module.hot 객체가 생성된다.

사용

if (module.hot) {
  console.log("핫모듈 켜짐");

  module.hot.accept("./test", () => {
    console.log("test 모듈 변경됨");
  });
}

module.hot 객체의 accept 메소드를 활용하여 변경을 감지하고자 하는 파일경로를 첫번쨰인자로 전달해주고, 감지된 이후 실행시킬 콜백함수를 전달할 수있다. 이곳에 api요청을 보내 DOM을 업데이트 하는등의 콜백함수를 전달하여 test모듈이 변경되었을시 실행할 함수를 작성해준다.

핫 로딩을 지원하는 로더

자체적으로 핫 로딩을 지원하는 로더가 있는데, style-loader,react-hot-loader,file-loader등이 존재한다. 따라서 이와같은 로더들을통해 다뤄지는 파일들은 위처럼 accept를 사용하여 경로를 설정해주지 않아도 자동으로 업데이트 시켜준다.