HMR-webpack-hot-middleware不要重新加載我的頁面

Question

我有一個使用webpack-dev-middleware和webpack-hot-middleware的Vue（hello-world）應用程序

[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配置中的換行符是錯字。）

您可以看到一個將Webpack-hot-Middleware應用於現有webpack-dev-Middleware應用程序的工作示例 （盡管使用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()
    });
});