Es gibt einige Webpack Dev Server-Konfigurationen (sie sind Teil der gesamten Konfiguration):
config.devServer = {
contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
stats: {
modules: false,
cached: false,
colors: true,
chunk: false
},
proxy: [{
path: /^\/api\/(.*)/,
target: options.proxyApiTarget,
rewrite: rewriteUrl('/$1'),
changeOrigin: true
}]
};
function rewriteUrl(replacePath) {
return function (req, opt) { // gets called with request and proxy object
var queryIndex = req.url.indexOf('?');
var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
req.url = req.path.replace(opt.path, replacePath) + query;
console.log("rewriting ", req.originalUrl, req.url);
};
}
Ich führe das Webpack mit dem folgenden Befehl aus:
node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js
Ich kann http://localhost:8080
auf meinem lokalen Computer auf den Dev-Server zugreifen, möchte aber auch von meinem Handy oder Tablet aus auf meinen Server zugreifen (diese befinden sich im selben Wi-Fi-Netzwerk).
Wie kann ich es aktivieren? Vielen Dank!
webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp
Antworten:
(Wenn Sie auf einem Mac und einem Netzwerk wie meinem arbeiten.)
Führen Sie webpack-dev-server mit aus
--host 0.0.0.0
- damit kann der Server auf Anforderungen aus dem Netzwerk warten , nicht nur auf localhost.Suchen Sie die Adresse Ihres Computers im Netzwerk. Geben Sie im Terminal
ifconfig
denen1
Abschnitt oder den mit so etwas ein und suchen Sie ihninet 192.168.1.111
Besuchen Sie auf Ihrem Mobilgerät im selben Netzwerk
http://192.168.1.111:8080
und genießen Sie das heiße Nachladen von Dev Bliss.quelle
ifconfig
nicht installiert, kann IP-Adresse überip addr show
--host 0.0.0.0
wir zum Ausführen des Dev-Servers noch eine Konfigurationsdatei aktualisieren oder kann ich sie einfach ausführennpm run dev --host 0.0.0.0
? Denn wenn ich gerade den Befehl ausführe, ohne etwas zu ändern, wird ein Fehler ausgegeben. Wenn wir eine Konfigurationsdatei aktualisieren müssen, können Sie uns bitte den Dateinamen / das Verzeichnis mitteilen?Sie können Ihre IP-Adresse direkt in der Webpack-Konfigurationsdatei festlegen:
quelle
ipconfig > IPv4 Address
open: true
Flag verwenden möchten, können Sie es auch setzenopenPage: 'http://localhost:8080'
und Ihr Browser wird ordnungsgemäß erneut gestartet, anstatt zu versuchen, 0.0.0.0:8080 automatisch zu laden, und dies schlägt fehl.Es ist vielleicht nicht die perfekte Lösung, aber ich denke, Sie können ngrok dafür verwenden. Ngrok kann Ihnen dabei helfen , einen lokalen Webserver dem Internet auszusetzen . Sie können ngrok auf Ihren lokalen Entwicklungsserver verweisen und dann Ihre App für die Verwendung der ngrok-URL konfigurieren.
Angenommen, Ihr Server wird auf Port 8080 ausgeführt . Sie können ngrok verwenden, um dies durch Laufen der Außenwelt auszusetzen
Das Gute daran
ngrok
ist, dass es eine sicherere https- Version der exponierten URL bietet, die Sie jeder anderen Person auf der Welt geben, um Ihre Arbeit zu testen oder zu zeigen.Außerdem stehen im Befehl viele Anpassungen zur Verfügung, z. B. das Festlegen eines benutzerfreundlichen Hostnamens anstelle einer zufälligen Zeichenfolge in der angezeigten URL und viele andere Dinge.
Wenn Sie nur Ihre Website öffnen möchten, um die Reaktionsfähigkeit von Mobilgeräten zu überprüfen, sollten Sie sich für browersync entscheiden .
quelle
Für mich hat es letztendlich geholfen, dies der Webpack-Dev-Server-Konfiguration hinzuzufügen:
und dann auch die webpack.config.js-Datei von babel ändern:
Holen Sie sich jetzt einfach den Hostnamen Ihres Computers (
hostname
auf dem OSX-Terminal), fügen Sie den von Ihnen definierten Port hinzu, und schon können Sie mobil arbeiten.Im Vergleich zu ngrok.io können Sie mit dieser Lösung auch das Hot-Reloading-Modul von react auf Mobilgeräten verwenden.
quelle
Ich konnte keinen Kommentar abgeben, um die Antwort von forresto um zusätzliche Informationen zu erweitern, aber hier in der Zukunft (2019) müssen Sie
--public
aufgrund einer Sicherheitslücke--host 0.0.0.0
allein ein Flag hinzufügen . Schauen Sie sich diesen Kommentar für weitere Details an.Um zu vermeiden, dass Sie auf andere Antworten antworten, finden Sie hier den Rat von forresto sowie die zusätzlichen Details, die Sie benötigen, damit dies funktioniert:
Fügen Sie beide hinzu:
--host 0.0.0.0
und
--public <your-host>:<port>
Dabei ist Ihr Host der Hostname (für mich ist es (Name) s-macbook-pro.local) und Port ist der Port, auf den Sie zugreifen möchten (für mich ist es wieder 8081).
So sieht meine package.json aus:
quelle