Почему создается сборка React Webpack, показывающая пустую страницу?

Я создаю приложение для реагирования, и в настоящий момент webpack-dev-server работает просто отлично (появляется привет мир), но webpack -p показывает пустую страницу. Для сборки "Производство" Вкладка "Сеть" под инструментами chrome dev показывает index.html и index_bundle.js чтобы иметь размер 0 B (см. Рисунок) enter image description here. Но это явно не так. Размер файла HTML - 227 B & index_bundle.js file размер составляет 195Kb (см. рисунок)

Также вкладка Chrome Devtools Elements отображает следующее (см. Рисунок) enter image description here

Мой конфигурационный файл webpack выглядит следующим образом: enter image description here

ОТВЕТЫ

Ответ 1

Я понял это, я использовал browserHistory без настройки локального сервера. Если я изменил его на hashHistory, он сработал. Чтобы тестировать производство веб-пакетов локально с помощью истории браузера с реакционным маршрутизатором, мне нужно было это сделать. Настроить сервер:

Ваш сервер должен быть готов для обработки реальных URL-адресов. Когда приложение сначала загружается с /, оно, вероятно, будет работать, но по мере того, как пользователь будет перемещаться, а затем будет обновляться в /accounts/23, ваш веб-сервер получит запрос /accounts/23. Он понадобится для обработки этого URL-адреса и включения вашего приложения JavaScript в ответ.

Экспресс-приложение может выглядеть так:

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 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)

И на всякий случай, когда кто-то развертывается в firebase, используя реактивный маршрутизатор с историей браузера, выполните следующие действия:

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

Ответ 2

использование

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

вместо

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

и не забудьте заменить его в коде маршрутов

<HashRouter>
  ...
</HashRouter>

Ответ 3

GitHub Pages не поддерживает маршрутизаторы, которые используют HTML5 pushState API истории под капотом (например, React Router с использованием browserHistory). Это связано с тем, что при наличии новой загрузки страницы для URL- http://user.github.io/todomvc/todos/42, например http://user.github.io/todomvc/todos/42, где /todos/42 является интерфейсом, сервер GitHub Pages возвращает 404, потому что он ничего не знает of /todos/42. Если вы хотите добавить маршрутизатор в проект, размещенный на страницах GitHub, вот несколько решений:

  • Вы можете перейти от использования API истории HTML5 к маршрутизации с помощью хэшей. Если вы используете React Router, вы можете переключиться на hashHistory для этого эффекта, но URL будет длиннее и подробнее (например, http://user.github.io/todomvc/#/todos/42?_k=yknaj), Подробнее о различных реализациях истории в React Router.
  • Кроме того, вы можете использовать трюк, чтобы научить страницы GitHub обрабатывать 404 путем перенаправления на страницу index.html со специальным параметром перенаправления. Вам нужно будет добавить файл 404.html с кодом перенаправления в папку build перед развертыванием вашего проекта, и вам нужно будет добавить код, обрабатывающий параметр перенаправления index.html. Подробное объяснение этой техники вы найдете в этом руководстве.