webpack HMR的理解

webpack-dev-server

使用webpack-dev-server可以实现改变代码后，浏览器页面自动刷新。
但是如果遇到编辑内容，在页面输入内容后，又去代码端改变其样式，这时保存代码后页面刷新，这时候之前编辑的内容就消失了。
面对此种问题,可以利用webpack热更新来解决。

webpack HMR

热更新

1. 应用运行过程中实时替换某个模块，应用运行状态不受影响
2. 热替换只将修改的模块实时替换至应用中

HMR注意事项

1. 处理hmr的代码报错会导致自动刷新，(用hotOnly解决)
2. 没启用hmr的情况下，hmr API报错， if(module.hot)判断是否存在

//在webpackconfig.js中配置，开启热更新
devServer: {
    // hot: true
    hotOnly: true // 只使用 HMR，不会 fallback 到 live reloading
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]

//在处理热更新模块的代码中加入判断
if (module.hot) {}