Perché la produzione di produzione di React Webpack mostra una pagina vuota?

Question

Sto costruendo un'app di reazione e al momento webpack-dev-server funziona perfettamente (viene visualizzato il testo ciao mondo), ma webpack -p mostra una pagina vuota. Per la build di produzione La scheda di rete sotto gli strumenti di chrome dev, mostra index.html e index_bundle.js per avere la dimensione 0 B (vedi immagine) Ma questo chiaramente non è il caso la dimensione del file HTML è 227 B & index_bundle.js la dimensione del file è di 195 Kb (vedi foto)

anche Chrome Devtools Elementi Tab, presenta i seguenti (vedi foto)

mio file di configurazione webpack assomiglia a questo:

Answer 1

ho capito, stavo usando browserHistory, senza la creazione di un loca l server. Se l'ho modificato in hashStoria, ha funzionato. Per testare la produzione del webpack localmente con la cronologia del browser react-router avevo bisogno di fare questo Configura un server:

Il tuo server deve essere pronto a gestire URL reali. Quando l'app carica per la prima volta, probabilmente funzionerà, ma man mano che l'utente naviga intorno e poi effettua il refresh su/accounts/23 il tuo server web riceverà una richiesta per/accounts/23. Ne avrai bisogno per gestire quell'URL e includere la tua applicazione JavaScript nella risposta.

Un'app espresso potrebbe essere simile a questo:

const express = require('express') 
const path = require('path') 
const port = process.env.PORT || 8080 
const app = express() 

// serve static assets normally 
app.use(express.static(__dirname + '/public')) 

// handle every other route with index.html, which will contain 
// a script tag to your application's JavaScript file(s). 
app.get('*', function (request, response){ 
    response.sendFile(path.resolve(__dirname, 'public', 'index.html')) 
}) 

app.listen(port) 
console.log("server started on port " + port) 

E solo nel caso qualcuno è la distribuzione di Firebase utilizzando reagiscono-router con il browser-history fare questo:

{ 
    "firebase": "<YOUR-FIREBASE-APP>", 
    "public": "<YOUR-PUBLIC-DIRECTORY>", 
    "ignore": [ 
    "firebase.json", 
    "**/.*", 
    "**/node_modules/**" 
    ], 
    "rewrites": [ 
    { 
     "source": "**", 
     "destination": "/index.html" 
    } 
    ] 
}