webpack HMR开启方式webpack.config.dev.js修改devServer配置package.jso

开启方式

webpack.config.dev.js修改devServer配置

devServer: {
  // 监听的目录
  contentBase: './dist',
  hot: true,
},

package.json使用webpack-dev-server启动服务

"hot": "webpack-dev-server --config webpack.config.dev.js --hot"

如果不添加--hot参数，则需要在webpack的config文件中配置hotModuleReplacement plugin

"hot": "webpack-dev-server --config webpack.config.dev.js"

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

代码入口需要添加模块更新后的回调函数，vue项目支持hmr是因为vue-loader实现了此功能

// index.js
if (module.hot) {
// 如果不执行accept回调，则默认走刷新
// 如果accept指定了具体模块，则具体模块会执行相应的回调。没有指定accept回调的模块会把事件一直冒泡到入口文件
// 触发accept（回调）时，表示新模块已经部署生效，在回调内访问的都是新模块内容
  module.hot.accept()
}

accept参考

热更新过程

webpack监听文件系统变化，将新代码放到内存中，并通知webpack-dev-server
webpack-dev-server收到代码更新，通过websocket通知webpack-dev-client更新的模块hash值（消息类型有hash和ok）
webpack-dev-client将更新信息发给hmr-runtime
hmr-runtime在编译结束时（ok）向webpack-dev-server请求更新列表，然后通过jsonp下载模块代码
hmr-runtime部署新模块，部署成功就触发客户端hot.accept回调，部署失败则触发live-reload（浏览器刷新）如果可用的话

原理参考