web-dev-qa-db-fra.com

Pourquoi la production de production de React Webpack affiche-t-elle une page vierge?

Je suis en train de construire une application de réaction et, pour le moment, webpack-dev-server fonctionne parfaitement (le texte hello world s'affiche), mais webpack -p affiche une page vierge. Pour la génération de production L'onglet réseau sous les outils de développement de chrome indique que index.html et index_bundle.js ont une taille de 0 B (voir l'image)  enter image description here Mais ce n'est clairement pas le cas. La taille du fichier HTML est de 227 B & index_bundle.js la taille du fichier est de 195Kb (voir l'image)  

Également, Chrome Devtools Elements Tab montre ce qui suit (voir image)  enter image description here

Mon fichier de configuration webpack ressemble à ceci:  enter image description here

javascriptweb-applicationsreactjswebpackredux
19
jasan

Je l'ai compris, j'utilisais browserHistory sans configurer de serveur local. Si je l'ai changé en hashHistory cela a fonctionné. Pour tester la production Webpack localement avec l'historique du navigateur réagisseur-routeur, je devais le faire. Configurez un serveur:

Votre serveur doit être prêt à gérer des URL réelles. Lorsque l'application se charge pour la première fois à/elle fonctionnera probablement, mais au fur et à mesure que l'utilisateur navigue, puis actualise à l'adresse/comptes/23, votre serveur Web reçoit une demande relative à/comptes/23. Vous en aurez besoin pour gérer cette URL et inclure votre application JavaScript dans la réponse.

Une application express pourrait ressembler à ceci:

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)

Et juste au cas où quelqu'un se déploierait sur firebase en utilisant react-router avec l'historique du navigateur, procédez comme suit:

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

utilisation 

import { HashRouter } from 'react-router-dom';

au lieu de

import { BrowserRouter} from 'react-router-dom';

et n'oubliez pas de le remplacer dans le code de votre itinéraire 

<HashRouter>
  ...
</HashRouter>
3
Yecodeo

GitHub Pages ne prend pas en charge les routeurs qui utilisent l’API de l’historique HTML5 pushState sous le capot (par exemple, React Router utilisant browserHistory). En effet, lorsqu'il y a un nouveau chargement de page pour une URL telle que http://user.github.io/todomvc/todos/42, où /todos/42 est un itinéraire frontal, le serveur GitHub Pages renvoie 404 car il ne connaît rien de /todos/42. Si vous souhaitez ajouter un routeur à un projet hébergé sur GitHub Pages, voici deux solutions:

  • Vous pouvez passer de l’utilisation de l’API d’historique HTML5 au routage avec des hachages. Si vous utilisez React Router, vous pouvez passer à hashHistory pour cet effet, mais l’URL sera plus longue et plus détaillée (par exemple, http://user.github.io/todomvc/#/todos/42?_k=yknaj). En savoir plus sur les différentes mises en œuvre de l'historique dans React Router.
  • Alternativement, vous pouvez utiliser une astuce pour apprendre à GitHub Pages à gérer 404 en redirigeant vers votre page index.html avec un paramètre de redirection spécial. Avant de déployer votre projet, vous devez ajouter un fichier 404.html avec le code de redirection dans le dossier build, puis ajouter du code gérant le paramètre de redirection à index.html. Vous pouvez trouver une explication détaillée de cette technique dans ce guide .
1
s4ndhyac