此文简单介绍一下hmr的概念、比较webpack和vite中的hmr共同点和差异，并讲述vite项目中hmr失效的排查思路和解决措施。

作为前端打包工具的重要工具人--webpack，相信大家在项目中并不陌生。前段时间 webpack5 新出了个特性: 模块联邦。今天就带大家通过一个小实战来熟悉一下它的用法。

本文就来深度分析一下关于 Webpack 热更新的原理和实现。需要注意的是热更新不是 Webpack 的专利，其他的打包工具也是有的，并且会有一些区别。 本文主要关注 Webpack。 我已经给 Vue3 的 babel-jsx 插件提了PR，有兴趣可以看一下我是如何实现的。 …

发现比webpack4，打包出来的结果确实少了不少！更简洁，更容易读懂（这里我已把注释删掉）。 总的来说不难理解，其实还是内部实现了个___webpack_require__方法，如果看不懂就多来几遍，看懂了发现也没什么。。。 再回头看编译的结果，貌似好像打包出来的结果有些复杂…