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

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.

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 .

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/'
}

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
}

Funktioniert bei mir so

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

},

Arbeiten an der Riot App

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"},

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.

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' },
        ]
    },
});

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.

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,
  },
},

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
}