从零开始开发一个react脚手架（四）
这一篇可能主要讲的是热更新，写的很细，遇到很多有意思的地方，一一和大家讲解下。
前沿：webpack-dev-server支持热更新，简单的说就是你修改代码，浏览器能够自动刷新页面。
先看一段代码截图
webpack-dev-server的配置。
- historyApiFallback设置为true,有点类似于app.get("*", index)，就是一个兜底的路由，保证所有未拦截的404页面都转向index。
- contentBase 设置的就是dist目录，即webpack打包的dist目录，所以开启webpack-dev-server之前，必须打包一下，不然找不到index.html文件。
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层做了一次服务转发。
我把原本cli-view目录下的webpack.config.js改成了app.config.js。我把所有的配置都放在了这个文件里面。我本地启用了一个端口8888的服务，而我的cli-view的port是3000，当我请求API后，所有的/api前缀的请求都转到了8888下。
到了这里关于webpack-dev-server的内容就差不多了。很细，很有意思
从零开始开发一个react脚手架（五）