멀티 컴파일러 환경에서의 HMR (webpack)

[hmu332233]

keyword webpack

[hmu332233]

이슈

• 사내의 거대한 모놀리스 앱을 비교적 작은 단위의 앱 단위로 분리하여 빌드할 수 있는 분리된 체계 변경하는 작업을 진행함
• 앱 분리 이후로 HMR을 실행하면, HMR을 실행하지 않은 대상의 앱들은 모두 무한 새로고침 발생 -> ???

원인 분석

• devServer는 앱 한개를 바라보지만 이전에 dev 모드로 빌드된 페이지를 접근할 경우 devServer가 처리하지 못하는 페이지에서 웹팩 이벤트를 받게 되어서 브라우저에서 새로고침 처리함
• 예시 보여주기

해결

• 멀티 컴파일러 환경 (이라고 webpack은 말하는) 에서 사용 가능한 옵션이 존재
• 이것을 넣어 앱마다 다른 신호를 주도록 하여 영향을 받지 않도록 분리
  • https://www.npmjs.com/package/webpack-hot-middleware#config:~:text=name - Bundle name%2C specifically for multi-compiler mode

해결 방안을 인지한 상태에서 다시 한번 원인 분석

• 기존 webpack hmr 설정

webpack-hot-middleware/client?name=client&reload=true

원인 플로우

1. 모든 앱들이 client로 신호를 보냄
2. devServer는 특정 앱만을 위해 켜져있는 상태
3. devServer가 처리하지 못하는 영역에 대해서 신호가 오니 reload 옵션에 의해 브라우저는 새로고침을 함
4. 새로고침 되었으나 여전히 같은 이슈를 가지고 있으므로 다시 새로고침
5. 반복

그래서 수정은?

• 앱마다 다른 name을 가지도록 분리하고 webpack hmr이 해당 앱에 대해서 처리할 수 있도록 설정

  
  // webpack.config.js

{ name: client // 기존 name: appName // 변경: 각 앱마다 분리된 이름을 가지도록 처리 }

webpack-hot-middleware/client?name=client&reload=true // <- 기존: 모든 앱이 client로 고정 webpack-hot-middleware/client?name=${appName}&reload=true // <- 변경: 각 앱마다 올바른 name 가지도록 처리