2021-06-23 :: 웹펙 데브 서버 세팅하기

만약 변경 사항이 있으면 webpack을 다시 돌려줘야한다. 

npm run build해야함

수정 하나 수정할 때마다 리로딩 하려면 속터짐

그래서 hot reloading을 사용한다.

 

CRA에서는 원래 설정을 해준다. 서버 관련된 설정이다.

npm i webpack-dev-server -D

옵션 -D는 개발용이다.

위 패키지는 proxy server설정에도 이용된다.

cors를 해결할 때 쓴다.

npm i -D @types/webpack-dev-server

 

npm i @pmmmwh/react-refresh-webpack-plugin

npm i raect-refresh

이거 설치하는거 그냥 다 CRA에서 하는거 수동으로 하는거다. 다 외울 필요 없고 필요하면 공식문서 뒤져보자

 

npm i fork-ts-checker-webpack-plugin -D

fork를 통해 비동기적 작업을 동시에 처리할 수 있도록 한다.

import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';

 

hot reloading위해 webpack dev서버를 설치하고 설정했다.

 

역시 package.json에 설정해두자

  "scripts": {
    "dev": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack serve --env development",
  },

npm run dev

WDS는 지금 live reloading을 해준다. 이제 랜더링 변경사항이 생겨도 자동으로 바로 변경해준다.

여기까지가 Create React App을 수동으로 설정해보았다.