webpack dev server, hot reloading // 20210421

1. 핫 리로딩

• 웹팩을 사용할 경우 코드를 조금만 수정하더라도 npm run dev 또는 npx webpack을 통해 다시 리로딩을 해야하는 것이 불편함.

• 그럴때 조금씩 수정한건 바로 반영이 되도록 하는 핫 리로딩 방법

1) react refresh 설치

// 터미널에서

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

//react refresh와 webpack refresh를 개발용으로 설치

//개발용 서버도 한개 설치

npm i -D webpack-dev-server

2) 명령어 수정

package.json에서

script dev 명령어를 "webpack serve --env development"로 수정

3) webpack.config.js 설정

설치한 wepack refresh plugin 호출

const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
그리고 plugin에 넣어준다

plugins : [
  new RefreshWebpackPlugin()
]

babel-loader의 plugin도 수정

plugins : [
   'react-refresh/babel'
]

4) dev server 설정

webpack.config.js 하단에 devServer 추가

devServer : {
  publicPath : '/dist/', //output의 publicPath를 그대로 가져옴.
  hot : true,
},

5) webpack dev server의 역할?

• webpack config js 대로 빌드를 돌린다음 결과를 dist폴더에 저장함.
• index.html을 실행하면 결과물을 제공하는데 hot: true로 지정하면 소스코드의 변경점이 생길 경우 그에 따라 저장했던 결과물을 수정해줌.

6) 리로딩? 핫 리로딩?

리로딩 = 새로고침
새로고침을 할 경우 기존에 입력된 데이터가 날라감.
핫 리로딩은 수정된 부분만 새로고침.
핫 리로딩은 에러 발생 시에도 바로 콘솔에 표시가 됨.