webpack 实现 HMR 及其实现原理

通过插件HotModuleReplacementPlugin()

配置在webpack.config.js中配置devServer

devServer: {
  contentBase: './dist',  // 起一个在dist文件夹下的服务器
  open: true,  // 自动打开浏览器并访问服务器地址
  port: 8085,
  hot: true,      // 开启HMR功能
  hotOnly: true   // 即使HMR不生效，也不自动刷新
},

pluginsp配置中使用HotModuleReplacementPlugin插件

plugins: [
  ...// 其他插件
  new webpack.HotModuleReplacementPlugin()
],

判断然后进行手动判断进行模块热更新，如果你不想做以下判断那么可以使用module.hot.accept()，整个项目做hmr只要有代码变化就进行更新

if(module.hot) {
  module.hot.accept('./number', () => {
    // 使用更新过的 library 模块执行某些操作...
  })
}

修改启动命令，启动

"start": "webpack-dev-server"

此时运行npm start,即可实现模块热更新

HMR实现原理

HMR的更新流程

修改了一个或多个文件。
文件系统接收更改并通知Webpack。
Webpack重新编译构建一个或多个模块，并通知HMR服务器进行了更新。
HMR Server使用websockets通知HMR Runtime需要更新。（HMR运行时通过HTTP请求这些更新。）
HMR运行时再替换更新中的模块。如果确定这些模块无法更新，则触发整个页面刷新

工作流程图解

红色框内是服务端，橙色框是浏览器端

绿色的方框是 webpack 代码控制的区域。

蓝色方框是 webpack-dev-server 代码控制的区域。

紫红色的方框是文件系统，文件修改后的变化就发生在这。

青色的方框是应用本身