Wie erhalte ich von Geräten im lokalen Netzwerk Zugriff auf den Webpack-Dev-Server?

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:8080auf 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!

(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 ifconfigden en1Abschnitt 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:8080und genießen Sie das heiße Nachladen von Dev Bliss.

Sie können Ihre IP-Adresse direkt in der Webpack-Konfigurationsdatei festlegen:

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}

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

./ngrok http 8080

Das Gute daran ngrokist, 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 .

Für mich hat es letztendlich geholfen, dies der Webpack-Dev-Server-Konfiguration hinzuzufügen:

new webpackDev(webpack(config), {
    public: require('os').hostname().toLowerCase() + ':3000'
    ...
})

und dann auch die webpack.config.js-Datei von babel ändern:

module.exports = {
    entry: [
        'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000',
        ...
    ]
    ...
}

Holen Sie sich jetzt einfach den Hostnamen Ihres Computers ( hostnameauf 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.

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 --publicaufgrund einer Sicherheitslücke --host 0.0.0.0allein 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:

  "scripts": {
    ...
    "start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
    ...
  },