摘要：根据配置经验，还需要配置一个，根据我实际的测试结果，不用手动加入这个也可以实现热更新。我们公司的脚手架没用这个结果，导致自己额外增添了很多配置。，走到这里，我们会发现只实现了第一步页面自动刷新。很细，很有意思从零开始开发一个脚手架五
这一篇可能主要讲的是热更新，写的很细，遇到很多有意思的地方，一一和大家讲解下。
前沿：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脚手架（五）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103499.html
摘要：前面两篇文都只是铺垫，今天至少要实现一个简单的开始之前再说一下垫片和。我一开始以为会在引入，但并不是。这是我的，当然以后会拆出来，作为目录下的一个执行文件。里面就配置了一个。下一篇从零开始开发一个脚手架四 前面两篇文都只是铺垫，今天至少要实现一个简单react的hello word 开始之前再说一下垫片和presets。 前几天突发疑问，create-react-app是怎么做的垫片，...
摘要：关于和，其实单纯问两者的区别，大家都知道，一个是开发依赖，一个是线上依赖。因为一开始的开发不规范，导致我随意乱装。。一个包可以再大点。脚手架已经实现了三分之一，现在是直接来作为脚手架，到最后效果应该是的形式，不过命令内容已经实现和。 前言：最近天天加班做新项目，Taro版的小程序，还要实现富文本加海报，踩了不少坑，下次专门开个坑说一下。 回到脚手架，说实话从头写一个，即便是参考crea...
摘要：弄清之后，就去脚手架源代码里面找。这样更加灵活，而且复用性高，起新项目，如果差别不大，几乎可以做到零配置，这样开发者压根就不需要关心业务之外的东西从零开始开发一个脚手架三 上一篇已经初步整了个kkk-react，这一篇不写代码，粗略讲解下create-react-app的部分源码。 前沿：科普下看源码的思路。以本人看过N多源码的经验总结，想要看这种脚手架或者npm包的源码，第一步就是看...
摘要：第一步创建两个项目这个是脚手架项目，脚手架说白点就是项目了，但要时时看效果，总不能一直到，所以需要。但因为是开发脚手架啊，这一步可以放到最后来弄，先把打包构建的步骤弄好。 前沿： 脚手架工具一大堆，但如果全部用第三方的脚手架，项目做起来肯定束手束脚，想来点差异化的东西都很难，所以最好是整一份自己的脚手架工具，想咋玩咋玩。阅读了next脚手架和create-react-app脚手架源码，...
阅读 1157·2023-04-26 01:35
阅读 2512·2021-11-02 14:44
阅读 7639·2021-09-22 15:38
阅读 2204·2021-09-06 15:11
阅读 3719·2019-08-30 15:53
阅读 795·2019-08-29 16:54
阅读 630·2019-08-26 13:48
阅读 1762·2019-08-26 13:47
