在配置热更新时候的警告，导致页面没有内容！

Question

C:\Users\Administrator\Desktop\imooc\react-webpack-teach>npm run dev:client

> react-webpack-teach@1.0.0 dev:client C:\Users\Administrator\Desktop\imooc\react-webpack-teach

> cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js

i ｢wds｣: Project is running at http://0.0.0.0:8888/

i ｢wds｣: webpack output is served from /public/

i ｢wds｣: 404s will fallback to /public/index.html

‼ ｢wdm｣: Hash: e9078d726db8d257ca60

Version: webpack 4.12.1

Time: 5918ms

Built at: 2018-06-26 16:56:27

                      Asset       Size  Chunks                    Chunk Names

app.e9078d726db8d257ca60.js    250 KiB       0  [emitted]  [big]  app

                 index.html  411 bytes          [emitted]

Entrypoint app [big] = app.e9078d726db8d257ca60.js

 [0] ./node_modules/react-hot-loader/index.js 228 bytes {0} [built]

 [2] ./node_modules/react/index.js 190 bytes {0} [built]

 [3] (webpack)/hot/log.js 1010 bytes {0} [built]

 [9] ./node_modules/react-hot-loader/dist/react-hot-loader.production.min.js 1.28 KiB {0} [built]

[10] (webpack)/hot/emitter.js 77 bytes {0} [built]

[21] ./client/app.js 1.37 KiB {0} [built]

[23] ./node_modules/react-hot-loader/patch.js 213 bytes {0} [built]

[25] (webpack)/hot/dev-server.js 1.6 KiB {0} [built]

[32] (webpack)-dev-server/client/overlay.js 3.58 KiB {0} [built]

[34] (webpack)-dev-server/client/socket.js 1.05 KiB {0} [built]

[35] ./node_modules/loglevel/lib/loglevel.js 7.68 KiB {0} [built]

[37] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]

[43] ./node_modules/url/url.js 22.8 KiB {0} [built]

[44] (webpack)-dev-server/client?http://0.0.0.0:8888 7.75 KiB {0} [built]

[45] multi (webpack)-dev-server/client?http://0.0.0.0:8888 webpack/hot/dev-server react-hot-loader/patch ./client/app.js 64 bytes {0} [built]

    + 31 hidden modules

WARNING in configuration

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

This can impact web performance.

Assets:

  app.e9078d726db8d257ca60.js (250 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Entrypoints:

  app (250 KiB)

      app.e9078d726db8d257ca60.js

WARNING in webpack performance recommendations:

You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.

For more info visit https://webpack.js.org/guides/code-splitting/

Child html-webpack-plugin for "index.html":

     1 asset

    Entrypoint undefined = index.html

    [0] (webpack)/buildin/module.js 497 bytes {0} [built]

    [1] (webpack)/buildin/global.js 489 bytes {0} [built]

    [2] ./node_modules/lodash/lodash.js 527 KiB {0} [built]

    [3] ./node_modules/html-webpack-plugin/lib/loader.js!./client/template.html 555 bytes {0} [built]

i ｢wdm｣: Compiled with warnings.

有这4个报错，服务正常启动，但是页面是空白的 没有显示内容！

Answer 1

Jokcy 2018-06-26 17:10:28

你用的是webpack4的版本，开发时需要把webpack配置的mode设置为development

• 提问者 慕粉4408182 #1

  "scripts": {
          "dev": "webpack --mode development",
          "build:client": "webpack --config build/webpack.config.client.js",
          "build:server": "webpack --config build/webpack.config.server.js",
          "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",
          "clear": "rimraf dist",
          "build": "npm run clear && npm run build:client && npm run build:server",
          "start": "node server/server.js"
      },
  
  这个配置了也还是不行，另外两个警告会影响热更新吗？

• 提问者 慕粉4408182 #2

  页面内容出来了，但是没有实现热更新的功能！
  保存代码还是重新发送了HTTP请求

• 提问者 慕粉4408182 #3

  非常感谢！

Answer 2

提问者 慕粉4408182 2018-06-26 17:02:09

页面内容出来了，但是没有实现热更新的功能！

保存代码还是重新发送了HTTP请求

• Jokcy #1

  你改了哪部分的代码，课程内容中只实现了react组件的热更新，另外最新版的react-hot-loader的用法也已经不一样了，如果你是自己安装的包默认应该是最新版，用法参考https://github.com/gaearon/react-hot-loader

• 提问者 慕粉4408182 回复 Jokcy #2

  代码是按照课程写的 react-hot-loader组件安装的也是3.1.3.

• 提问者 慕粉4408182 回复 Jokcy #3

  您上面说的webpack4要设置mode是怎么设置？ dev:client里面还是dev？

点开查看后面1条评论