recently upgraded the project"s build tool from webpack2 to webpack4. The speed of building is faster, and the target files generated are much smaller.

but there is an annoying problem, that is, after modifying any code, the browser will refresh the whole page instead of the previous jsonp refresh of webpack2, resulting in much lower development efficiency.

then I found the problem with dev-derver.js "s html-webpack-plugin-related code here:

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

it is possible that the trigger mechanism of the html-webpack-plugin-after-emit event in webpack4 is different, causing webpack to trigger the html-webpack-plugin-after-emit event every time any code file is modified, resulting in an entire page refresh. Or is it that the module reference mechanism of webpack4 is different, causing a single file to be mistakenly identified as a huge modification (entry template modification? ), and you have to refresh the entire page?

if I remove this code, I can really solve the problem of refreshing the entire page every time, but sometimes when the whole page does need to be refreshed, it doesn"t refresh either, it needs to be refreshed manually by F5. After trying all kinds of ways, it still can"t be solved.

I wonder if anyone has encountered a similar problem?

project is based on vuejs + element-ui. I uploaded the complete code on github: https://github.com/hzsrc/vue-.

Please ask all the experts to take a look at it.