这节我们来介绍如何实现手机和电脑同时预览,在配置了webpack的情况下,实现起来就很简单啦~主要用到的工具就是草料二维码生成器~
使用上节我们讲解过的host属性,设置为你的ipv4地址例如'192.168.xx.xx',然后重启webpack-dev-server。重启的步骤是在命令行工具中连按两次ctrl+C来退出,然后重新执行npm run watch。 关于如何查询到本机的ip地址,打开你的命令行工具,输入ipconfig/all,按下回车,就可以找到你的本机地址啦~
确认你的手机和电脑已经连接在同一个局域网下面
打开草料二维码生成器,网址是:https://cli.im/ ,将dev-server生成的你的项目本地服务器地址粘贴到草料里面,然后点击生成二维码,如下图:
打开手机相机扫描二维码,如果是微信内的页面的话,直接用微信扫一扫~你就可以在手机内预览项目啦~并且刷新也是实时的噢,只要保持开启这个页面,并且手机屏幕是亮起状态,你在电脑上所做的一切修改都会实时刷新在手机上~
关于webpack-dev-server就讲到这里啦,会用了吗?