javascript - react - webpack-- config webpack config js

¿Por qué la compilación de producción de React Webpack muestra una página en blanco?

Question

Estoy creando una aplicación de reacción y, en este momento, webpack-dev-server funciona bien (aparece el texto " hola mundo" ), pero webpack -p muestra una página en blanco. Para la compilación de producción La pestaña de red en las herramientas de desarrollo de Chrome, muestra index.html e index_bundle.js para tener tamaño 0 B (ver imagen) Pero claramente no es el caso. El tamaño del archivo HTML es 227 B & index_bundle.js . El tamaño del archivo es 195Kb (ver imagen)

También la pestaña Elementos de Devtools de Chrome muestra lo siguiente (ver imagen)

Mi archivo de configuración de webpack se ve así:

Answer 1

GitHub Pages no admite enrutadores que utilicen la API de historial de pushState HTML5 bajo el capó (por ejemplo, React Router usando browserHistory ). Esto se debe a que cuando hay una carga de página nueva para una url como http://user.github.io/todomvc/todos/42 , donde /todos/42 es una ruta de inicio, el servidor de GitHub Pages devuelve 404 porque no sabe nada de /todos/42 . Si desea agregar un enrutador a un proyecto alojado en GitHub Pages, aquí hay un par de soluciones:

• Podría cambiar de utilizar la API de historial de HTML5 al enrutamiento con hashes. Si usa React Router, puede cambiar a hashHistory para este efecto, pero la URL será más larga y más detallada (por ejemplo, http://user.github.io/todomvc/#/todos/42?_k=yknaj ) . Lea más sobre diferentes implementaciones de historia en React Router.
• Alternativamente, puedes usar un truco para enseñar a GitHub Pages a manejar 404 al redirigir a tu página index.html con un parámetro de redireccionamiento especial. Necesitará agregar un archivo 404.html con el código de redirección a la carpeta de build antes de implementar su proyecto, y deberá agregar el código que maneja el parámetro de redireccionamiento a index.html . Puede encontrar una explicación detallada de esta técnica en esta guía .

Answer 2

Lo descubrí, estaba usando browserHistory sin configurar un servidor local. Si lo cambié a hashHistory funcionó. Para probar la producción del paquete web localmente con el historial del navegador del enrutador de reacción, necesitaba hacer esto Configurar un servidor:

Su servidor debe estar listo para manejar URL reales. Cuando la aplicación se cargue por primera vez en / probablemente funcionará, pero a medida que el usuario navega y luego presiona actualizar en / accounts / 23, su servidor web recibirá una solicitud para / accounts / 23. Lo necesitará para manejar esa URL e incluir su aplicación de JavaScript en la respuesta.

Una aplicación expresa podría tener este aspecto:

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)

Y en caso de que alguien esté implementando FireBase usando el enrutador de reacción con el historial del navegador, haga esto:

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

Answer 3

utilizar

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

en lugar de

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

y no olvides sustituirlo en tu código de rutas.

<HashRouter>
  ...
</HashRouter>

Answer 4

<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">

nombre base : cadena
La URL base para todas las ubicaciones. Si su aplicación se sirve desde un subdirectorio en su servidor, querrá establecer esto en el subdirectorio. Un nombre base correctamente formateado debe tener una barra diagonal inicial, pero no una barra diagonal final.