webpack中的热刷新与热加载

webpack很是的强大，合理的脚手架能够为咱们的工做省去众多繁琐无心义的工做。其中热刷新、热加载相较于传统开发大大提升了开发节奏。

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

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

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

在学习react时我就发现了上文提到的react前两个脚手架提供的是热刷新而非热加载。

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

• 热刷新：文件内动改动后，整个页面刷新，不保留任何状态（好比输入过内容的Input表单），至关于webpack帮你摁了F5刷新
• 热加载：文件改动后，以最小的代价改变被改变的区域。尽量保留改动文件前的状态（对input输入内容后，修改其余标签的代码）

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

动手修改

从头配置就是另外一个领域了，因此咱们直接从vue-cli开始改动。

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

1. 删除vue相关的依赖、文件等；整个scr内的东西均可以删掉
2. package.json依赖加入babel-loader webpack-dev-server react-hot-loader(最关键)
3. package.json命令行设置 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
4. webpack.base.conf 添加.jsx文件须要通过babel-loader处理，配置options:{plugins:['react-hot-loader/babel']}
5. .babelrc presets加入react，下方加入plugins:['react-hot-loader/babel']
6. 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()
复制代码

网上查询后得知这是实现热加载的关键，它须要代码自己具有模块化的性质（这意味着只要像三大框架这样可编写可复用组件的框架都能利用这个性质），这样才能够经过插♂拔代码实现热加载。 而react的jsx特效不是HotModuleReplacementPlugin能搞定的只能老老实实热刷新了。 在这种状况下react-hot-loader呼之欲出。配合官方的使用方法，就能继续使用热加载了。

ps: 仅作参考，react的不少代码我也处于探索与学习中 配置好的项目地址：gayhub