手机调试 React＋Webpack 页面的最佳方法？

Question

我有一个项目用到了 Webpack，React，webpack-dev-server 和 react-hot-loader。应用本身的服务器是 Express，在 3000 端口上。打包的 JS 文件在 webpack-dev-server 上，8080端口。

本地调试没问题，但是现在我想用手机调试网页遇到了问题。

1. 我可以在手机上通过 <IP:3000> 访问开发机上的页面，但是在 HTML 里引用打包 JS 文件的地址是localhost:8080，手机能访问网页，访问不到 JS。

2. 我尝试过用 webpack-dev-middleware，通过 Express 中间件提供打包文件，不用另外的服务器。这样没问题。但是因为 nodemon 会自动重启服务器，hot-loader 不能正常工作（用的是 webpack-hot-middleware）。

另外，我有一台云服务器，Nginx 上设置了端口转发，通过 SSH 隧道转到开发机。可以通过域名访问开发机上的页面。相当于直接访问<开发机 IP:3000>，这样访问页面方便点，但还是存在无法访问打包文件的问题。

求指点，怎么设置开发环境，可以兼顾本地开发测试和手机调试页面。

Answer 1

题主提到：HTML 里引用打包 JS 文件的地址是localhost:8080。那可以将HTML里的js文件地址作为变量<Static-IP:8080>，开发时配置成开发机的地址，发布时配置成CDN的地址就OK了。

Answer 2

你的开发机自己配置一个域名，设置好hosts，本地配置好基于那个域名的访问
然后开启Charles，手机设置全局的代理到Charles的地址上
然后手机通过这个域名访问你的机器

当然了，除了Charles，任意可以做代理的软件其实都可以

Answer 3

Localhost改成0.0.0.0