本文写于2018-08-18，2019年从旧blog迁移到掘金
背景
在H5移动端开发中，我们除了使用chrome提供的移动端模拟器调试应用外，还可以无线在手机浏览器进行实时调试我们的页面。
原理
我们利用ip这样一个nodejs模块来获取应用运行的ip地址，然后可以用在同一局域网中的移动端设备（手机）去访问ip所获取这个网址 + 我们开发中指定的端口号
方案实施
- 首先保证你的开发环境（开发服务器）和你的移动设备在同一局域网，也就是同一ip下；
- 在利用webpack搭建工程的development部分时，我们利用webpack-dev-middleware 和express来开发一个本地服务器，在代替webpack-dev-server的同时，还能满足更多定制化的需求
- 在该服务器中：我们利用webpack-dev-middleware的实例提供的waitUntilValid(callback)方法，在webpack编译完成时，执行我们传入的回调函数，在该回调函数中：我们就可以利用终端打印出我们应用运行的ip地址 + 端口：
const ip = require('ip');
...
const ipURL = `http://${ip.address()}:${PORT}`;
// callback中
console.log(chalk.cyan(`On Your Network: ${ipURL}`));
- 然后我们利用在同一局域网中的移动端设备（例如手机浏览器）访问网址ipURL，就可以看到本地起的应用效果了。
代码地址
express + webpack-dev-middleware实现的本地服务器代码在这里
