Javascript HMR-网页包热中间件不重新加载我的页面

我有一个Vuehello world应用程序，使用 webpack开发中间件和webpack热中间件

[hrm]说当我运行应用程序时，它在控制台中连接 然后，当我在main.js上做了一些更改时，它启动了

bundle rebuilding
bundle.js:1382 [HMR] bundle rebuilt in 95ms
bundle.js:2336 [HMR] Checking for updates on the server...
bundle.js:2409 [HMR] Updated modules:
bundle.js:2411 [HMR]  - ./src/main.js
bundle.js:2416 [HMR] App is up to date.

这很好，但是DOM并不反映我的更改，我必须手动重新加载页面才能看到它们

以下是我现在拥有的代码文件：

// dev-server.js
...
app.use(middleware(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.path
}));

app.use(webpackHotMiddleware(compiler));
...

这里是我的网页配置：

module.exports = {
   context: srcPath,
   entry: ['webpack-hot-middleware/client', './main'],
   resolve: {
       extensions: ['.js', '.vue'],
       alias: {
           'vue$': 'vue/dist/vue.esm.js'
       }
    },
    output: {
        path: distPath,
        publicPath: distPath,
        filename: 'bundle.js',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
            inject: true
        })
    ]
}

然后我接受main.js上的模块热更改：

import Vue from 'vue'

new Vue({
  el: '#app',
  data: {
    message: "hello world!!"
  }
})

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

---

我一直在努力寻找论坛和博客文章，但似乎我遗漏了一些东西，任何可能的问题。

我建议先取消所有选项，然后在基本功能正常工作后，按需要逐步添加它们。我认为您的路径选项实际上是默认的，而且心跳看起来很长。我还假设您的网页条目配置中的换行符是一个输入错误

---

你可以看到，虽然是React而不是Vue，但请忽略一周前完成的咖啡脚本。它非常简单，与您的设置非常相似，只是选项较少。我自己也可以避免接触module.hot，不过我想这取决于混合中的其他库。

我目前正在从Webpack 3切换到Webpack 4，我面临着与您相同的问题

我认为您的dev-server.js缺少一些代码。我知道现在有点晚了，但我希望这能成为像我一样挣扎了几天的人的答案

第4页：

// dev-server.js

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
    log: () => {},
    heartbeat: 2000
});

compiler.hooks.compilation.tap('html-webpack-plugin-after-emit', () => {  
    hotMiddleware.publish({  
      action: 'reload'  
    });  
});

第3页：

// dev-server.js

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
    log: () => {},
    heartbeat: 2000
});

compiler.plugin('compilation', function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        hotMiddleware.publish({ action: 'reload' })
        cb()
    });
});

---

即使没有选项，我也会得到相同的结果，只需将它们添加到conf中，因为可能有人会建议这样做。我以你们为例，似乎我们有完全相同的配置，不知道会发生什么。看看我的回购协议，它只是一个你好的世界。嗨，我知道这是一个旧的线程，但我刚刚遇到完全相同的问题，你的代码看起来几乎和我的一样。在模板执行失败后，我出现了两个新错误：模板执行失败错误：引用错误：未定义网页包引用错误：未定义网页包我想知道你是否遇到过这个问题？嗨，邓肯，恐怕我以前从未遇到过“未定义网页包”错误。抱歉，无法提供帮助。@ZincChuang我在哪里可以找到对“重新加载”操作的订阅？我看到您发布了此事件，但不也有订阅者吗？