[FrontEnd] HMR(Hot Module Replacement)

 

 

🚀 HMR(Hot Module Replacement)

`HMR`은 브라우저를 새로 고치지 않아도 `Web Pack`으로 Build한 결과물이 Web Application에 실시간으로 반영될 수 있게 도와주는 설정 입니다.

브라우저 새로 고침을 위한 `Live Reload` 대신 이용 가능하고, `Web Pack Dev Server`와 함께 이용할 수도 있는 것이에요.

 

반응형

 

    🔽  HMR 설정

React.js, 앵귤러, Vue.js와 같이 대부분의 Framework에서 이미 `HMR`을 이용할 수 있는 Loader들을 지원하고 있으나, 만약 개별적으로 설정하고 싶다면 아래와 같은 방식으로 설정할 수 있습니다.

 

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

Dev Server에 Option으로 `hot:true`를 추가하고, Java Script나, CSS 스타일 시트를 변경하면 해당 Module이 바로 Update가 됩니다. 그리고, 화면에서는 브라우저가 다시 로딩되지 않고도 변경된 내용을 바로 확인할 수 있어요.