webpack-dev-server / hot-loader

• 매번 수정마다 webpack빌드를 새로 해줘야 반영이 됐지만 webpack-dev-server / hot-loader 두가지 사용 시 실시간으로 반영된다.

• webpack-dev-server: 코드의 변경사항을 감지해서 바꿔준다.
  (webpack.config.js 파일을 읽어서 빌드를 해준 뒤 항상 서버로 유지시켜준다)

설치

npm i -D webpack-dev-server 
npm i -D react-hot-loader

설정 방법

package.json파일 scripts에서 webpack에서 webpack-dev-server --hot으로 변경

 "scripts": {
   "dev": "webpack-dev-server --hot"
 }

entry파일에서 아래와 같이 설정

const { hot } = require('react-hot-loader/root')
const Hot = hot(컴포넌트이름) 추가

• 예시

const React = require("react");
const ReactDom = require("react-dom");
const { hot } = require('react-hot-loader/root');
const WordRelay = require("./WordRelay");
const Hot = hot(WordRelay);
ReactDom.render(<Hot />, document.querySelector("#root"));

webpack.config.js파일에서 babel 플러그인에
"react-hot-loader/babel" 추가

(babel-loader의 options -> plugins)

  plugins: [
            "react-hot-loader/babel",
            ]

html파일에서 script파일 경로를 ./dist/app.js -> ./app.js로 변경

• dist파일은 쓰지않는다.
• output을 webpack-dev-server가 따로 처리하기 때문에 dist파일에 app은 쓰지않는다.
• 때문에 dist를 빼주고 output에서 설정한 파일이름을 넣어준다.

빌드 다시 진행 후 실행해보면 실시간으로 반영된다.

스크립트 경로를 바꾸는 방법

webpack.config.js에 output에 아래 코드 추가

publicPath: '/dist/'

추가 후 빌드 다시 실행 (npm run dev)

• 설치한 웹팩서버는 entry파일(client.jsx)만 변화를 감지하기 때문에 webpack설정파일 변경시는 다시 서버를 실행해주어야 한다.

html scrtip경로 변경

<script src='./dist/app.js'>

output의 path와 publicPath의 차이점

• path는 실제 경로
• publicPath는 가상 경로

console창 로그

[HMR] : hot module relode

[WDS] : webpack dev server

어떤곳에서 변경이 되서 수정이 된건지 알려준다.