So weisen Sie den Webpack-Entwicklungsserver an, index.html für jede Route bereitzustellen

148

Mit dem React-Router können React-Apps verarbeitet werden /arbitrary/route. Damit dies funktioniert, muss mein Server die React-App auf einer beliebigen Route senden.

Der Webpack-Entwicklungsserver verarbeitet jedoch keine beliebigen Endpunkte.

Hier gibt es eine Lösung mit einem zusätzlichen Express-Server. So lassen Sie den Webpack-Dev-Server Einstiegspunkte vom React-Router zu

Ich möchte jedoch keinen anderen Express-Server starten, um den Routenabgleich zu ermöglichen. Ich möchte dem Webpack-Entwickler nur mitteilen, dass er mit einer beliebigen URL übereinstimmt, und mir meine Reaktions-App senden. Bitte.

eguneys
quelle

Antworten:

169

Ich fand die einfachste Lösung, um eine kleine Konfiguration einzuschließen:

  devServer: {
    port: 3000,
    historyApiFallback: {
      index: 'index.html'
    }
  }

Ich fand dies bei einem Besuch unter: PUSHSTATE WITH WEBPACK-DEV-SERVER .

cmfolio
quelle
18
Sie können es auch als CLI-Option verwenden:--history-api-fallback
VonD
7
Ich musste so etwas mit der neueren Version 2 verwenden.devServer: { port: 3000, historyApiFallback: true },
Adrian Moisa
1
In der Tat müssen Sie die CLI-Option "--history-api-fallback" verwenden und in Ihrer Webpack-Dev-Serverkonfiguration die Auflösung auf Ihre Indexdatei einstellen, wie in dieser Antwort oben beschrieben.
Jc Figueroa
86

Die Option historyApiFallback in der offiziellen Dokumentation für webpack-dev-server erklärt deutlich, wie Sie beides erreichen können

historyApiFallback: true

Dies fällt einfach auf index.html zurück, wenn die Route nicht gefunden wird

oder

// output.publicPath: '/foo-app/'
historyApiFallback: {
  index: '/foo-app/'
}
GG
quelle
Aber tatsächlich ist der Webpack-Dev-Server gerade in Wartung. Sein Nachfolger ist github.com/webpack-contrib/… , das unterstützthistoryApiFallback
jacob
3
Für jeden, der dies 2019 liest, ist laut github.com/webpack-contrib/webpack-serve#webpack-serve webpack-dev-server der Nachfolger webpack-serve, nicht umgekehrt, wie in stackoverflow.com/questions/31945763/… erwähnt .
Ur5us
Der Kommentar von ur5us ist tatsächlich falsch. webpack-serve war der geplante Nachfolger von webpack-dev-server. Ich bin der Autor von Webpack-Serve und ehemaliger Betreuer von Webpack-Dev-Server. Als ich mir eine Auszeit nahm, lehnten bittere Org-Mitglieder den Webpack-Aufschlag ab, und seitdem habe ich ihn unter meiner Gabel veröffentlicht.
Muschellandschaft
23

Das Hinzufügen eines öffentlichen Pfads zur Konfiguration hilft dem Webpack, echtes root ( /) zu verstehen, selbst wenn Sie sich in Unterrouten befinden, z./article/uuid

Ändern Sie also Ihre Webpack-Konfiguration und fügen Sie Folgendes hinzu:

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

Ohne publicPathRessourcen wird möglicherweise nicht richtig geladen, nur index.html.

Auf Webpack getestet 4.6

Größerer Teil der Konfiguration (nur um ein besseres Bild zu haben):

entry: "./main.js",
output: {
  publicPath: "/",
  path: path.join(__dirname, "public"),
  filename: "bundle-[hash].js"
},
devServer: {
  host: "domain.local",
  https: true,
  port: 123,
  hot: true,
  contentBase: "./public",
  inline: true,
  disableHostCheck: true,
  historyApiFallback: true
}
Jurosh
quelle
Wow, das hat auch bei mir funktioniert! Der historyApiFallbackTrick hat aus irgendeinem Grund nur für den letzten Teil der URL funktioniert. /testwürde funktionieren, /test/testwürde aber 404 geben.
Alex. P.
Neben historyApiFallback: {index: '/'} oder historyApiFallback: true(beide haben bei mir funktioniert) publicPathwar in meinem Fall auch die Einstellung von (Router 5.2) unerlässlich.
Marcus Junius Brutus
17

Funktioniert bei mir so

devServer: {
    contentBase: "./src",
    hot: true,
    port: 3000,
    historyApiFallback: true

},

Arbeiten an der Riot App

user2088033
quelle
14

Meine Situation war etwas anders, da ich die eckige CLI mit Webpack und die Option 'Auswerfen' verwende, nachdem ich den Befehl ng eject ausgeführt habe. Ich habe das ausgeworfene npm-Skript für 'npm start' in der package.json geändert, um das Flag --history-api-fallback zu übergeben

"start": "webpack-dev-server --port = 4200 --history-api-fallback "

"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4200 --history-api-fallback",
"build": "webpack",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"prepree2e": "npm start",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
"startold": "webpack-dev-server --inline --progress --port 8080",
"testold": "karma start",
"buildold": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"},
Brandon Søren Culley
quelle
6

Wenn Sie sich für die Verwendung entscheiden webpack-dev-server, sollten Sie sie nicht für die Bereitstellung Ihrer gesamten React-App verwenden. Sie sollten es verwenden, um Ihre bundle.jsDatei sowie die statischen Abhängigkeiten bereitzustellen. In diesem Fall müssten Sie zwei Server starten, einen für die Node.js-Einstiegspunkte, die tatsächlich Routen verarbeiten und den HTML-Code bereitstellen, und einen weiteren für das Bundle und die statischen Ressourcen.

Wenn Sie wirklich einen einzelnen Server möchten, müssen Sie die Verwendung von beenden webpack-dev-serverund die webpack-dev-Middleware in Ihrem App-Server verwenden. Es verarbeitet Bundles "on the fly" (ich denke, es unterstützt Caching und das Ersetzen heißer Module) und stellt sicher, dass Ihre Anrufe bundle.jsimmer auf dem neuesten Stand sind.

André Pena
quelle
2
Ich verwende den Webpack-Dev-Server nur für die Entwicklung von Hot-Reloading-Quellkarten usw. Ansonsten habe ich eine statische Website, auf der ich die Dateien von überall hosten kann.
Eguneys
3

Sie können historyApiFallbackdie index.htmlBereitstellung des Fehlers anstelle eines 404-Fehlers aktivieren , wenn an dieser Stelle keine andere Ressource gefunden wurde.

let devServer = new WebpackDevServer(compiler, {
    historyApiFallback: true,
});

Wenn Sie verschiedene Dateien für verschiedene URIs bereitstellen möchten, können Sie dieser Option grundlegende Umschreiberegeln hinzufügen. Das index.htmlwird noch für andere Wege bedient.

let devServer = new WebpackDevServer(compiler, {
    historyApiFallback: {
        rewrites: [
            { from: /^\/page1/, to: '/page1.html' },
            { from: /^\/page2/, to: '/page2.html' },
            { from: /^\/page3/, to: '/page3.html' },
        ]
    },
});
JojOatXGME
quelle
2

Ich weiß, dass diese Frage für den Webpack-Dev-Server gilt, aber für jeden, der Webpack-Serve 2.0 verwendet. mit Webpack 4.16.5 ; Webpack-Serve ermöglicht Add-Ons. Sie müssen Folgendes erstellen serve.config.js:

const serve = require('webpack-serve');
const argv = {};
const config = require('./webpack.config.js');

const history = require('connect-history-api-fallback');
const convert = require('koa-connect');

serve(argv, { config }).then((result) => {
  server.on('listening', ({ server, options }) => {
      options.add: (app, middleware, options) => {

          // HistoryApiFallback
          const historyOptions = {
              // ... configure options
          };

          app.use(convert(history(historyOptions)));
      }
  });
});

Referenz

Sie müssen das Entwicklungsskript von webpack-serveauf ändern node serve.config.js.

Yotke
quelle
2

Für mich hatte ich Punkte "." auf meinem /orgs.csvweg zB also musste ich das in mein webpack confg einfügen.

devServer: {
  historyApiFallback: {
    disableDotRule: true,
  },
},
GentryRiggen
quelle
0

Ich stimme den meisten bestehenden Antworten zu.

Eine wichtige Sache, die ich erwähnen wollte, ist, dass Sie wahrscheinlich eine zusätzliche Einstellung benötigen (insbesondere die Einstellung, wenn Sie beim manuellen Neuladen von Seiten auf tieferen Pfaden auf Probleme stoßen, bei denen der gesamte Abschnitt des Pfads bis auf den letzten beibehalten und der Name Ihrer jsBundle-Datei übernommen wird publicPath).

Zum Beispiel, wenn ich einen Pfad habe /foo/barund meine Bundler-Datei aufgerufen wird bundle.js. Wenn ich versuche, die Seite manuell zu aktualisieren, wird die Meldung 404 /foo/bundle.jsnicht gefunden. Interessanterweise werden beim erneuten Laden aus dem Pfad /fookeine Probleme angezeigt (dies liegt daran, dass der Fallback dies behandelt).

Versuchen Sie, das Folgende in Verbindung mit Ihrer vorhandenen webpackKonfiguration zu verwenden, um das Problem zu beheben. output.publicPathist das Schlüsselstück!

output: {
    filename: 'bundle.js',
    publicPath: '/',
    path: path.resolve(__dirname, 'public')
},
...
devServer: {
    historyApiFallback: true
}
Der verrückte Schimpanse
quelle