如何在本地网络中的移动设备中启用热重新加载？ （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）。我使用命令＆＃34; node server.js＆＃34;运行webpack-dev-server，使用以下＆＃34; server.js＆＃34;：

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 =＆＃39; http：//＆＃39; + ip +＆＃39;：3003＆＃39; +＆＃39; / assets / bundles /＆＃39;。

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

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

Answer 1

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

http://0.0.0.0:3003

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

{{1}}

Answer 2

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

安装internal-ip

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

npm install --save-dev internal-ip

告诉webpack-dev-server在本地ip

上运行

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

（server.js和ip中的config.output.publicPath = 'http://' + ip + ':3003' + '/assets/bundles/'，webpack.local.config - 文件中定义的。{。}。我还从＆＃34; server.js＆＃34; -file中删除了host: "1ocalhost",行。