升級到webpack4之后，每次修改代碼都會整個頁面刷新，而不是之前局部刷新了，如何解決？

最近將項目的構(gòu)建工具從webpack2升級到了webpack4。構(gòu)建速度快了，生成的目標(biāo)文件也小了很多。

但是出現(xiàn)了一個煩人的問題，就是現(xiàn)在修改了任意代碼之后，瀏覽器都會整頁刷新，而不是之前webpack2的jsonp方式局部刷新，導(dǎo)致開發(fā)效率降低了很多。

然后我找到了問題出在dev-derver.js的html-webpack-plugin相關(guān)的代碼這里：

// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {debugger
        hotMiddleware.publish({action: 'reload'})
        cb()
    })
})

可能是webpack4中的html-webpack-plugin-after-emit事件的觸發(fā)機制不一樣了，導(dǎo)致webpack在每次修改任意代碼文件時，都會觸發(fā)html-webpack-plugin-after-emit事件，從而導(dǎo)致了整個頁面刷新。或者是webpack4的模塊引用機制不一樣了，導(dǎo)致單個文件修改后被錯誤識別為巨大的修改（入口模板修改？），而必須刷新整個頁面？

我把這代碼去掉，確實可以解決每次都刷新整個頁面的問題，但是有時候確實需要整個頁面刷新時，它也不刷新了，需要手動F5刷新。經(jīng)過嘗試各種辦法仍沒法解決。

不知道有沒有人遇到過類似的問題？

項目是基于vuejs + element-ui的。我上傳了完整代碼在github上: https://github.com/hzsrc/vue-...

煩請各路高手們幫忙看下~