Question

我有一个Vue（hello-world）应用程序 webpack-dev-middleware和webpack-hot-middleware

[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));
...

这里是我的webpack配置：

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();
}

我自己在论坛和博客帖子上挣扎，但似乎我错过了一些东西，任何想法可能是什么问题。

Answer 1

我建议将所有选项都删掉，然后在基本功能正常工作后逐步添加它们。我认为你的path选项实际上是默认选项，而且心跳看起来很长。（我也假设您的webpack entry配置中的换行符是一个错字。）

你可以看到a working example of applying webpack-hot-middleware to an existing webpack-dev-middleware app（虽然是React而不是Vue - 请忽略CoffeeScript），这是在一周前完成的。它非常简单，与您的设置非常相似，只是选项较少。（我也可以避免自己触摸module.hot，但我想这取决于混合中的其他库。）

Answer 2

我目前正在从Webpack 3切换到4，我遇到了和你一样的问题。

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

对于Webpack 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'  
    });  
});

对于Webpack 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()
    });
});

HMR - webpack-hot-middleware不会重新加载我的页面

2 个答案: