1. Webpack-dev-server

live reloading 을 사용하기 위해 webpack과 함께 development server을 사용합니다.

오직 development 용으로 사용되야 하며webpack-dev-middleware 를 사용하여 webpack assets에 대한 fast in-memory access를 제공합니다.

webpack-dev-middleware에 대한 링크

1.1 install

npm install --save-dev webpack-dev-server

1.2 using devServer property

webpack.config.js

 module.exports = {
   mode: 'development',
   entry: {
     ...
   },
   devtool: 'inline-source-map',
 + devServer: {
 +  contentBase: './dist',
 + },
   plugins: [
     ...
   ],
   output: {
     ...
   },
 };

webpack-dev-server 에게 localhost:8080 주소로 dist디렉토리에 있는 files을 제공하기위한 설정입니다.

1.3 setting Script to run the dev server

Scripts:

2개 중 어느 것을 써도 됩니다. 결국 커스텀 명령입니다.
"webpack serve"만 포함되면 상관없습니다.

• "start:dev": "webpack serve"
• "start": "webpack serve --open"

package.json

{
  ...
   "scripts": {
     "watch": "webpack --watch",
   + "start": "webpack serve --open",
     "build": "webpack"
   },
   ...
}

npm run start 을 실행하면 browser가 자동으로 페이지를 로딩합니다.

이제 source files 중 어느 것이라도 변경되고 저장되면 web server가 자동적으로 코드를 컴파일한 후에 reloading 해줍니다.

1.4 devServer properties

• hot: Hot Module Replacement 기능 활성화 (boolean)

• contentBase : 콘텐츠를 제공 할 위치를 서버에 알립니다. (path)

• open: dev-server에게 서버가 시작된 후 브라우저를 열도록 지시합니다. (boolean)

• port: 요청을 수신 할 포트 번호를 지정합니다. (default 8080) (number)

• overlay: 컴파일러 오류 또는 경고가있을 때 브라우저에 전체 화면에 오류 또는 경고를 출력합니다. (boolean)

• proxy: api 백엔드 서버와 프론트 서버가 분리되어 다른 환경에서 api요청을 보낼 때 cors문제가 발생합니다. 이를 해결하기 위해 proxy서버를 통해 api요청 통신을 합니다. (url options)

• historyApiFallBack : history API를 사용하는 SPA 개발시 설정한다. 404가 발생하면 index.html로 리다이렉트한다.(boolean)

  webpack-dev-server의 configurable options을 볼려면 이 링크를 클릭하세요

---

2. Hot Module Replacement

HMR은 webpack이 제공하는 강력 기능 중 하나입니다.
서버가 실행 중에 모든 종류의 module들은 full refresh 없이 업데이트 될 수 있습니다.

전체 페이지 리로딩 없이 바뀐 부분만 리로딩을 해줘서 최신 상태를 유지시켜 줍니다.

2.1 Enabling HMR

setting webpack-dev-server configuration

devServer의 option으로 hot: true만 설정해주면 됩니다.

CLI로도 HMR 설정 가능합니다. webpack serve --hot=only

webpack.config.js

{
  ...
  devServer: {
        contentBase: './dist',
      + hot: true,
      },
   ...
}