[React] 2-9webpack dev서버와 핫 리로딩

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

 

react-refresh

코드를 수정할 때 새로고침하지 않고! 수정사항을 빠르게 교체해주는 라이브러리

 

설치하기

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

설치가 완료되면 package.json에 아래와 같이 react-refresh와 webpack-dev-servcer가 생긴다.

 

script의 명령어를 바꿔주자.

script{
   "dev" : "webpack serve --env development" 

 

webpack.config.js로 가서 위에서 설치한 plugin을 require해주자.

const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module > options > plugins에 react-refresh/babel을 추가해주고,

밖의 plugins에는 위에서 불러온 ReactRefreshWebpackPlugin를 추가해준다.

"module": {
  "options": {
  	"plugins": [“react-refresh/babel”] 
  },
  "plugins" : [
	new ReactRefreshWebpackPlugin()  
  ],
},

 

그런다음 dev서버 설정을 해주어야한다. 

dev서버는 output아래에 만들어주면 된다.

devServer: {
    publicPath: '/dist/', 
    hot : true,
  }

 

webpack-dev-server가 하는 일은 

webpack-config에 적어준대로 빌드의 결과물을 돌린후, 그 것을 /dist/폴더에 메모리로 저장함.

index를 시행하면 그 결과물을 보여주게됨 

webpack-dev-server는 변경점을 감지할 수 있다

소스코드에 어떤 변경점이 생기면 그에따라 저장했던 결과물을 수정해준다.

 

이제 npm run dev를 하면 webpack-dev-server가 실행이 될텐데

localhost8080이라는 주소를 인터넷 브라우저에 입력하여 열어준다.

수정내용을 바꾸면 실시간으로 반영된다. 

 

react-refresh와 react-webpack-plugin이 없어도 새로고침은 시켜주는데,

새로고침이 되면 단점이..기존의 데이터는 다 날아간다.

 

근데 핫 리로딩은 기존의 데이터를 유지하면서 화면을 바꿔준다. 

기존의 데이터를 유지하냐 하지 않느냐가 중요해서 핫리로딩 설정을 함