React---webpack热部署

不使用热部署

根据第二篇文章,我们现在已经搭建好了环境,并且也写了一个React入门demo,但是存在一个修改时的问题:我们每次开发完成之后都需要在命令行输入webpack打包生成bundle.js后才能运行查看结果:
1.修改内容

图片.png

2.进入目录打包

shizhengyangdeMacBook-Pro:0504 panyuanyuan$ pwd
/Users/panyuanyuan/java/react-native/react_more/0504
shizhengyangdeMacBook-Pro:0504 panyuanyuan$ webpack

3.观察运行

图片.png

热部署情况下

上面的模式开发的时候会影响效率,这时候我们可以使用热部署
1.热部署命令
这次我们观察运行结果的时候不适用webpack,而使用webpack --watch.这样就实现了热部署

webpack --watch

2.观察结果

图片.png

修改js文件,刷新文件
图片.png

3.服务热加载
我们还可以以服务的方式进行热加载:保持上面的窗口不懂,打开新的终端输入:

webpack-dev-server --inline --hot

这时候我们就可以以服务的方式启动访问,并且也是热部署:


图片.png

修改js文件后刷新页面:


图片.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容