webpack热更新无效

Question

1.项目结构：

2.我的webpack.config.js配置和package.json配置如下：

3.当我修改了index.html文件之后，控制台打印似乎是说明热更新成功：

问题：
1.控制台信息显示应该是热更新成功吗，但是页面并没有刷新，dist也文件也没有变化，请问怎么修改配置？
2.webpack-dev-server , HotModuleReplacePlugin，webpack-dev-middlevare webpack-hot-middle之间是什么关系？

Answer 1

如果你的webpack4的话或者是react项目可以考虑用这个进行热更新react-hot-loader，只需要在router的位置上报上一层就可以了，例如export default hot(module)(AppRouter)就行，

你的这种方法是需要在entry增加一行代码的，据我自己搭架子的时候需要过['webpack-dev-server/client', __dirname + "/src/main.js"],

或者是在入口文件执行这个方法

if(module.hot)
     {
         module.hot.accept();
     }

Answer 2

我的配置：
package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack --env.production"
  }

webapck.config.js

  devServer: {
        host: '0.0.0.0',
        useLocalIp: true,
        contentBase: path.resolve(__dirname, 'dist'),
        openPage: "webpack-dev-server",
        compress: true,
        port: 9000,
        open: true,
    }

Answer 3

找到问题了么 我也遇到这个了

Answer 4

我的dev-server配置

const hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: false,
  heartbeat: 2000
})
app.use(hotMiddleware)

dev-client配置

'use strict'
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')

hotClient.subscribe(function (event) {
  if (event.action === 'reload') {
    window.location.reload()
  }
})