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

Question

问题

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

当前设置

我是运行 django

python manage.py runserver 0.0.0.0:5555

并且我可以在同一个wifi中使用手机phone连接到开发服务器。我通过

获得了正确的 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

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

然后，我添加了一个简单的 React 组件和 django-webpack-loader (v.0.5.0)。我是运行 webpack-dev-server 使用命令 "node server.js"，具有以下 "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 开发者工具和 USB 数据线，我可以看到移动浏览器无法访问 webpack-dev-server (net::ERR_CONNECTION_REFUSED) 生成的文件“http://localhost:3003/assets/bundles/app-6d6d5c0dad55fc4b0e9e.js”。您将如何正确设置它？我也尝试将所有 "localhost"-部分更改为 0.0.0.0，但是即使在开发机器上也没有显示任何内容（除了基本的 HTML）。

Answer 1

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

var ip = '0.0.0.0'

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

publicPath: '/assets/bundles/',

Answer 2

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

安装内部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，它们在 webpack.local.config 文件中定义。）。我还从 "server.js" 文件中删除了 host: "1ocalhost", 行。

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

How to enable hot reloading in mobile devices in the local network? (Django + Webpack-Dev-Server)

django

webpack-dev-server

问题

当前设置

安装内部IP

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

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