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

Il router di reazione consente di reactjs alle app in modo /arbitrary/route . Per funzionare, ho bisogno del mio server per inviare l’app React su qualsiasi percorso abbinato.

Ma il server di sviluppo webpack non gestisce gli endpoint arbitrari.

C’è una soluzione qui usando un server Express aggiuntivo. Come consentire a webpack-dev-server di consentire l’ingresso di punti dal router di reazione

Ma non voglio triggersre 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.

Ho trovato la soluzione più semplice per includere una piccola configurazione:

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

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

L’ opzione historyApiFallback sulla documentazione ufficiale per webpack-dev-server spiega chiaramente come è ansible ottenere usando o

 historyApiFallback: true 

che semplicemente torna a index.html quando il percorso non viene trovato

o

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

La mia situazione era leggermente diversa, dal momento che sto usando la CLI angular con webpack e l’opzione ‘eject’ dopo aver eseguito il comando ng eject . Ho modificato lo script npm espulso per ‘npm start’ nel package.json per passare il flag –history-api-fallback

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

Funziona per me in questo modo

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

Lavorando su un’app di riot

Se scegli di utilizzare webpack-dev-server , non dovresti usarlo per servire l’intera app React. Dovresti usarlo per pubblicare 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 il webpack-dev-server e iniziare a utilizzare il webpack-dev-middleware all’interno dell’app-server. bundle.js pacchetti “al volo” (penso che supporti la cache e le sostituzioni di moduli caldi) e assicuri che le chiamate a bundle.js siano sempre aggiornate.

L’aggiunta di un percorso pubblico alla configurazione aiuta Webpack a comprendere la radice reale ( / ) anche quando si è su sottotesti, ad es. /article/uuid

Quindi modifica la configurazione del tuo webpack e aggiungi quanto segue:

 output: { publicPath: "/" } devServer: { historyApiFallback: true } 

Senza le risorse publicPath risorse potrebbero non essere caricate correttamente, solo index.html.

Testato su Webpack 4.6

Più grande parte della configurazione (solo per avere una migliore immagine):

 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 } 

Puoi abilitare historyApiFallback per servire index.html invece di un errore 404 quando non sono state trovate altre risorse in questa posizione.

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

Se si desidera pubblicare file diversi per URI diversi, è ansible aggiungere regole di riscrittura di base a questa opzione. index.html verrà comunque 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' }, ] }, }); 

So che questa domanda è per webpack-dev-server, ma per chiunque utilizzi webpack-service 2.0. con webpack 4.16.5 ; webpack-serve consente add-on. Devi creare 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))); } }); }); 

Riferimento

Dovrai cambiare lo script di sviluppo da webpack-serve al node serve.config.js .