升级到webpack4之后，每次修改代码都会整个页面刷新，而不是之前局部刷新了，如何解决？

Question

最近将项目的构建工具从webpack2升级到了webpack4。构建速度快了，生成的目标文件也小了很多。

但是出现了一个烦人的问题，就是现在修改了任意代码之后，浏览器都会整页刷新，而不是之前webpack2的jsonp方式局部刷新，导致开发效率降低了很多。

然后我找到了问题出在dev-derver.js的html-webpack-plugin相关的代码这里：

// force page reload when html-webpack-plugin template changescompiler.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事件的触发机制不一样了，导致webpack在每次修改任意代码文件时，都会触发html-webpack-plugin-after-emit事件，从而导致了整个页面刷新。或者是webpack4的模块引用机制不一样了，导致单个文件修改后被错误识别为巨大的修改（入口模板修改？），而必须刷新整个页面？

我把这代码去掉，确实可以解决每次都刷新整个页面的问题，但是有时候确实需要整个页面刷新时，它也不刷新了，需要手动F5刷新。经过尝试各种办法仍没法解决。

不知道有没有人遇到过类似的问题？

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

烦请各路高手们帮忙看下~

Answer 1

vue-loader升级了吗？热加载机制是vue-loader实现的

Answer 2

最近将项目的引用组件全部升了一遍级，没有再出现这个问题了。谢谢！