Come dire al server dev di webpack di servire index.html per qualsiasi percorso

Question

Il router di reazione consente di rispondere alle app per gestire /arbitrary/route. Per funzionare, ho bisogno del mio server per inviare l'app React su qualsiasi percorso abbinato.

Ma webpack dev server non gestisce i punti finali arbitrari.

Qui c'è una soluzione che utilizza un server Express aggiuntivo. How to allow for webpack-dev-server to allow entry points from react-router

Ma non voglio attivare un altro server express per consentire la corrispondenza del percorso. Voglio solo dire al server di sviluppo web di abbinare qualsiasi URL e inviarmi la mia app di reazione. per favore.

Answer 1

Se si sceglie di utilizzare webpack-dev-server, non è necessario utilizzarlo per servire l'intera app React. Dovresti usarlo per servire il tuo file bundle.js e le dipendenze statiche. In questo caso, è necessario avviare 2 server, uno per i punti di ingresso Node.js, che elaboreranno effettivamente percorsi e forniranno il codice HTML e un altro per il pacchetto e le risorse statiche.

Se si desidera realmente un singolo server, è necessario smettere di utilizzare webpack-dev-server e iniziare a utilizzare lo webpack-dev-middleware all'interno del proprio server delle applicazioni. Elabora pacchetti "al volo" (penso che supporti la cache e sostituzioni di moduli caldi) e assicuri che le chiamate a bundle.js siano sempre aggiornate.

Answer 2

ho trovato la soluzione più semplice per includere un piccolo config:

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

ho trovato questo visitando: http://jaketrent.com/post/pushstate-webpack-dev-server/

Answer 3

historyApiFallback opzione documentazione ufficiale per webpack-dev-server spiega chiaramente come si può raggiungere sia con utilizzando

historyApiFallback: true 

quale s implicare Falls Torna a index.html quando il percorso non viene trovato

o

// output.publicPath: '/foo-app/' 
historyApiFallback: { 
    index: '/foo-app/' 
} 

Answer 4

funziona per me come questo

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

}, 

di lavoro sulla rivolta app

Answer 5

La mia situazione era un po ' diverso, dal momento che sto usando la CLI angolare con il webpack e l'opzione 'espelli' dopo aver eseguito il comando ng eject. Ho modificato la sceneggiatura NPM espulso per 'inizio NPM' nel package.json di passare nella bandiera --history-api-fallback

"Start": "webpack-dev-server di --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"}, 

Answer 6

è possibile attivare historyApiFallback di servire il index.html invece di un errore 404 quando nessun altra risorsa è stata trovata in questa posizione.

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

Se si vuole servire file diversi per i diversi URI, è possibile aggiungere regole di base di riscrittura a questa opzione. Lo index.html sarà ancora pubblicato per altri percorsi.

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