Vue CLI的热加载（Hot Module Replacement，HMR）原理主要基于Webpack的HMR功能。热加载允许在应用运行时替换、添加或删除模块，而无需完全刷新页面。这样可以保持应用的状态，提高开发效率。以下是Vue CLI热加载的工作原理：

1. 启动开发服务器：当你使用vue-cli-service serve命令启动Vue项目时，Vue CLI会启动一个Webpack开发服务器，并配置Webpack以启用HMR。

2. 文件监听：Webpack通过webpack-dev-server在后台运行，监听项目文件的变化。一旦检测到文件变化，webpack-dev-server会通知浏览器某些模块已经更新。

3. 模块替换：浏览器接收到更新通知后，HMR插件会请求更新的模块。Webpack会编译并发送更新后的模块到浏览器，HMR插件则替换或更新旧的模块，而不需要刷新整个页面。

4. 状态保持：由于HMR可以仅替换更新的模块，应用的状态可以在不重新加载整个页面的情况下保持不变。这对于开发具有复杂状态的应用尤其有用，因为你不需要在每次小改动后重新构建应用状态。

5. 样式更新：对于样式文件（如CSS或Sass），HMR通过替换<style>标签来实现样式的热更新，这个过程几乎是瞬时的。

6. 热加载失败的回退：如果某些更新不能被热加载（例如，配置文件的变化），Webpack开发服务器会自动回退到完全刷新页面，以确保更新被正确应用。

Vue CLI的热加载功能极大地提高了开发效率，使得开发者可以即时看到代码变更的效果，而无需等待页面重新加载。这一切都得益于Webpack和Vue CLI的紧密集成，以及Webpack HMR插件的强大功能。