如何在本地网络中的移动设备中启用热重新加载？ （Django + Webpack-Dev-Server）

Question

题

使用Django和webpack-dev-server时如何启用javascript内容的热重新加载？ 即使开发机器的本地IP地址发生变化，理想的解决方案也能正常工作。 （时不时发生）

---

当前设置

我正在运行django

python manage.py runserver 0.0.0.0:5555

我可以在同一个wifi上使用手机连接到开发服务器。 我得到了正确的IP地址

import socket
local_ip = socket.gethostbyname(socket.gethostname())
print('Developing locally. Access through wifi: {}:5555'.format(local_ip))

打印出类似的东西

Developing locally. Access through wifi: 192.168.8.105:5555

使用此设置，我可以看到django提供的任何HTML内容。

然后，我添加了一个简单的React组件和django-webpack-loader（v.0.5.0）。 我正在使用命令“node server.js”运行webpack-dev-server，其中包含以下“server.js”：

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.local.config')

var ip = 'localhost'

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  inline: true,
  host: "1ocalhost",
  historyApiFallback: true,
  headers: { "Access-Control-Allow-Origin": "*" }
}).listen(3003, ip, function (err, result) {
  if (err) {
    console.log(err)
  }

  console.log('Listening at ' + ip + ':3003')
})

config.output.publicPath在另一个文件中定义，它是config.output.publicPath ='http：//'+ ip +'：3003'+'/ assets / bundles /'。

使用此设置，React组件显示在开发计算机的页面上（位于http://127.0.0.1:5555/ ）。 此外，热重新加载工作（只需保存JS文件将导致网页上的组件重新加载）。

但是 ，在相同wifi的移动设备上，我只能看到HTML部分，而不能看到React / JavaScript部分。 使用Google Developer工具和USB线我可以看到移动浏览器无法访问webpack-dev-server生成的文件“ http://localhost:3003/assets/bundles/app-6d6d5c0dad55fc4b0e9e.js ”（net :: ERR_CONNECTION_REFUSED ）。 你会如何正确设置？ 我也尝试将所有“localhost” - 部分更改为0.0.0.0，但是甚至在开发机器上也没有显示任何内容（基本HTML除外）。

Answer 1

就像Django开发服务器一样，将ip变量更改为0.0.0.0而不是localhost 。 您的手机正在手机中搜索服务器而无法找到它。 这将设置要连接的适当IP地址。

var ip = '0.0.0.0'

更新：您应该尝试删除公共路径的http://0.0.0.0:3003部分，在开头留下/。 这样，浏览器将在URL指向的任何主机上获取捆绑包。

publicPath: '/assets/bundles/',

Answer 2

一个有效的解决方案（也许有更好的方法，但这对我来说已经足够了）：

安装internal-ip

（或任何其他可以将内部IP输出到变量的npm包）

npm install --save-dev internal-ip

告诉webpack-dev-server在本地ip上运行

var ip = require('internal-ip').v4()

（两者， server.js和config.output.publicPath = 'http://' + ip + ':3003' + '/assets/bundles/'的ip config.output.publicPath = 'http://' + ip + ':3003' + '/assets/bundles/' ，它在webpack.local.config定义-文件。）。 我还删除了host: "1ocalhost",来自“server.js”文件的-line。