从零开始开发一个react脚手架（四）

这一篇可能主要讲的是热更新，写的很细，遇到很多有意思的地方，一一和大家讲解下。

前沿：webpack-dev-server支持热更新，简单的说就是你修改代码，浏览器能够自动刷新页面。

先看一段代码截图

webpack-dev-server的配置。

historyApiFallback设置为true,有点类似于app.get("*", index)，就是一个兜底的路由，保证所有未拦截的404页面都转向index。

inline设置为true,更新文件后刷新页面
- hot设置为true，只更新改动模块，因为我们用的是API方式允许webpack-dev-server，所以配置项目中必须设置port和host，否则会报错。

重点：基本配置完成后，在增加一段代码到webpack的entry里面

因为我们走的是API，而webpackDevServer里面已经提供了以方法addDevServerEntrypoints实现。只需要传递两个配置参数即可。他的效果如图，我打印出了webpackConfig

说白了就是手动把热更新的两个JS文件插入到了entry中，一并打包。如果我们手动写的webpack.config.js，就应该明白这点。所以这个API还是很方便的。

其实走到这里就能实现页面自动刷了。but...
根据配置经验，还需要配置一个

plugins.push(new webpack.HotModuleReplacementPlugin());

but，根据我实际的测试结果，不用手动加入这个plugin也可以实现热更新。原因就跟我上面说的一样，API自动加上了这个配置。我们公司的脚手架没用这个API结果，导致自己额外增添了很多配置。

BUT，走到这里，我们会发现只实现了第一步页面自动刷新。如果我们开发的是react应用就远远不够了。因为一旦项目大起来，刷新页面将会是一件非常非常耗时的事情，尤其是当涉及到服务器端渲染的时候。

要实现类似于懒更新的功能，需要引入react-hot-loader。引入最新版本，根据文档，只需要配置两个地方即可。
脚手架的babel配置，增加一个plugin react-hot-loader/babel

然后在我们的项目目录中cli-view 中包裹一层Root.jsx

至此就能完美的实现开发环境的自动的更新了，更改代码，能够实现刷新当前更改的module，而不是刷新整个页面。
其实还有一个小小的疑问，在测试过程中，我即便不加上 react-hot-loader/babel这个plugin，也能够实现懒更新，只需要在项目目录中配置即可。看了下这个plugin的源码，没看出所以然来，我猜测这个plugin,是不是说懒启动的时候，保证能走一遍babel编译？有待大佬验证！！！。

顺便简单说下proxy，一般而言调用后台接口都会报跨域，但设置了proxy，类似于在node层做了一次服务转发。