详解webpack中的热刷新与热加载的分别

详解webpack中的热刷新与热加载的分别

webpack非常的强大，合理的脚手架可以为我们的工作省去众多繁琐无意义的工作。其中热刷新、热加载相较于传统开发大大提高了开发节奏。

从脚手架发现热刷新、热加载的差异

相信大部分的vue开发者都是从vue-cli开始的，很多初学者欢快的跑着vue项目却不敢改随意改变vue-cli的配置（毕竟webpack确实很复杂，vue-cli也做了很多工作来优化初学者的体验）。

相比之下react没有提供一个比较健壮的脚手架了(至少没有明显地被我找到，望赐教)。据我知一个是yeoman的 generator-react-webpack、react的create-react-app，还有一个不错的react-starter-kit(热加载，而且集成了非常多代码，参考性很高)。

简单的区分热加载与热刷新:

热刷新：文件内动改动后，整个页面刷新，不保留任何状态（比如输入过内容的Input表单），相当于webpack帮你摁了F5刷新(欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860)
热加载：文件改动后，以最小的代价改变被改变的区域。尽可能保留改动文件前的状态（对input输入内容后，修改其他标签的代码）

这在虽然两者相较于传统开发（手动F5）都提升了开发体验，但两者之间的依旧很大，尤其是当项目变得愈发复杂之后，我们必须一劳永逸的解决这个问题（留出更多的时间来开发bug）。

动手修改

从头配置就是另一个领域了，所以我们直接从vue-cli开始改动。

下述步骤仅列出关键做启发参考，详细请参考最后github完整项目

• 删除vue相关的依赖、文件等；整个scr内的东西都可以删掉
• package.json依赖加入babel-loader webpack-dev-server react-hot-loader(最关键)
• package.json命令行设置 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
• webpack.base.conf 添加.jsx文件需要经过babel-loader处理，配置options:{plugins:['react-hot-loader/babel']}
• .babelrc presets加入react，下方加入plugins:['react-hot-loader/babel']
• src文件夹下创建main.js（起名要跟webpack配置的入口文件一致）

import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader'; 
import App from './pages/App'; 
import './assets/css/reset.scss';
// Render the main component into the dom
ReactDOM.render(<App/>, document.getElementById('app'));
export default hot(module)(App); // 热加载的关键

至此，我们就可以愉快地使用react体验热加载的快♂感了~
问题所在
其实在简单地修改vue-cli中的main.js文件为react相关代码（别忘了配置babel处理jsx）并依旧是热刷新。
经过本地代码观察对比后，发现了一个吸引人的名字：
在webpack.dev.conf文件中：

new webpack.HotModuleReplacementPlugin()

网上查询后得知这是实现热加载的关键，它需要代码本身具备模块化的性质（这意味着只要像三大框架这样可编写可复用组件的框架都能利用这个性质），这样才可以通过插♂拔代码实现热加载。(欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860)
而react的jsx特效不是HotModuleReplacementPlugin能搞定的只能老老实实热刷新了。
在这种情况下react-hot-loader呼之欲出。配合官方的使用方法，就能继续使用热加载了。
结语

感谢您的观看，如有不足之处，欢迎批评指正。

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。