Webpack - 웹팩 개발 서버 (webpack-dev-server)

[ 개요 ]

[ 개념 ]

• 웹팩에서 제공하는 프론트엔드 개발환경에서 사용할 수 있는 개발용 서버 (webpack-dev-server)
• 실제 번들링 된 결과물을 메모리에 올려서 빠르게 확인할 수 있다
• HMR을 통해 변경된 부분만 실시간으로 반영 가능
• webpack guide : https://webpack.kr/api/webpack-dev-server/

---

[ 구성 ]

/* webpack.config.js */
module.exports = {
  ... // mode, entry, output
  devServer: {
    client: {
      overlay: true,
      logging: "error",
    },
    static: {
      directory: path.join(__dirname, 'assets'), 
      publicpath: "/dist" // 콘텐츠를 제공할 URL
    },
    proxy: {
      "/api": "http://localhost:8081",
    },
    hot: "true",
  }
}

• client
  • overlay : 빌드시 에러나 경고를 브라우저 화면에 표시 (터미널이 X)
  • logging : 남겨지는 로깅 수준 설정

• static
  • directory : 서버에 정적파일을 제공할 수 있는 기준 경로
  • publicPath : 번들 파일에서 참조하는 파일의 기준 경로

• historyApiFallBack
  • 히스토리 API를 사용하는 SPA개발시 사용
  • status 404면 index.html로 리다이렉트
• 다양한 옵션 참고 : https://webpack.js.org/configuration/dev-server

---

[ 시작 ]

/* package.json */
"scripts": {
  "start": "webpack serve --open --mode=development --hot"
}

• --open : 브라우저를 열어주는 옵션
• --hot : HMR 활성화

[ 목업 API 서버 ]

• webpack 5 기준의 목업 api 서버 정리 글
• devServer > onBeforeSetupMiddleware
  : https://webpack.kr/configuration/dev-server/#devserveronbeforesetupmiddleware

[ HMR ]

[ 개요 ]

• Hot Module replacement : 코드 변경이 일어났을 때, 변경한 모듈만 바꿔치기 할 수 있는 기능
  • 서버 실행시 소스 파일들을 번들링하여 메모리에 적재
  • 소스 파일을 watch하고 있다가 변경이 감지되면 변경된 모듈만 새로 번들링
  • 변경된 모듈 정보를 브라우저에 전송
  • 변경을 인지하고 새로고침되어 변경사항이 반영된 페이지가 로드

• webpack > hot 을 true로 설정해서 HMR을 활성화
  • 옵션을 활성화 하는 것 만으로 모든 모듈에 대해 HMR이 수행되지는 않는다
    => 해당 모듈이 HMR 인터페이스를 구현한 경우에만 HMR이 수행
    => style-loader, file-loader 등이 내부적으로 HMR 인터페이스를 지원

/* webpack.config.js */
module.exports = {
  ... // mode, entry, output
  devServer: {
    hot: "true",
  }
}

• webpack guide : https://webpack.kr/configuration/dev-server/#devserverhot

---

[ HMR 내부 원리 ]

• module.hot.accept() 를 통해 관련 경로를 읽고 미리 구현해둔 값을 갱신해주는 코드가 수행
• 즉, HMR 인터페이스를 구현하지 않은 모듈은 정상적으로 동작되지 않는다
• 추가 : 모듈간의 업데이트 로직

/* 예시로 /result 경로로 요청이 들어올 경우 HMR 실행되는 것 */
if(module.hot){
  module.hot.accept("./result", () => {
    // 데이터 갱신 로직 수행
  })
}