웹 페이지 핫 업데이트가 잘못되었습니다. 페이지가 새로 고침되지 않았습니다.

문제: 콘솔이 출력되었지만 페이지 내용이 핫로드되지 않았습니다.

[WDS] App updated. Recompiling...
[WDS] App hot update...
...

오류 보고:

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object. (E:\webpack
ode_modules\[email protected]@webpack-dev-server\bin\webpack-dev-server.js:84:1)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming
pm-cache\_logs\2019-02-15T13_59_30_515Z-debug.log

해결: 이런 상황에서 일반적으로 웹팩 버전과 웹팩-dev-server 버전이 호환되지 않는 문제입니다. 이때 우리는 개발 환경에 필요한 웹팩 버전 번호와 웹팩-dev-server 번호를 검사해야 할 뿐만 아니라 생산 환경의 웹팩-dev-server가 일치하는지 검사해야 합니다. 일치하지 않으면 일치하지 않습니다.

//  webpack-dev-server  

"devDependencies": {
    ...
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1",
    ...
  },
  "dependencies": {
    ...
    "webpack-dev-server": "^2.11.1",
    ...
  }

여기까지만 하면 프로젝트를 뛰어올라 핫 업데이트를 실현할 수 있다.