webpack4热更新

在配置文件的output里添加publicPath

在webpack配置文件中配置热更新插件

在配置文件中引入webpack，并在插件中添加hmr插件

plugins:[
//热更新插件
    new webpack.HotModuleReplacementPlugin()
]

修改devServer的配置

devServer:{
    host:'localhost',
    port:'8080',
    open:true//自动拉起浏览器
    hot:true,//热更新，然后自动刷新
    hotOnly:true  // 修改hot为支持热更新
},

问题

完成上面4步操作后，打开页面，打开浏览器控制台，你会发现css已经实现了热更新，可是js修改的，控制台打印HMR很欢，可是像按钮绑定的函数依然是旧的，并没有更新，为了让它与 HMR 正常工作，我们需要使用 module.hot.accept 更新绑定到新的函数上，请参考这里

总结

关于JavaScript代码改变带来的热更新问题，其实是很复杂的，因为在直接使用html/js/css的开发模式下，JavaScript是webpack指定的入口，可以控制，css通过JavaScript引入后，也可以被webpack控制，可是在传统的开发模式下，html是直接写在页面中的，不被js所控制，也就不被webpack所控制，在这种情况下，如果只是对JavaScript代码进行热更新，会导致一系列的问题，比如因为DOM不会被卸载而导致的事件重复绑定问题，所以在这种情况选择直接刷新页面反而是更好的。

webpack的官方文档在介绍这部分内容的，避开了这个问题。。。

以上是在配置webpack过程中的一些思考，有什么心得再更新吧