从零开始开发一个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脚手架（五）