为啥 React Webpack 生产版本显示空白页面？

Posted 2023-02-22

【中文标题】为啥 React Webpack 生产版本显示空白页面？

【英文标题】：Why is React Webpack production build showing Blank page?为什么 React Webpack 生产版本显示空白页面？

【发布时间】：2016-09-29 18:04:24

【问题描述】：

我正在构建一个反应应用程序，目前webpack-dev-server 工作正常（hello world 文本出现），但 webpack -p 显示空白页。对于生产版本 chrome 开发工具下的网络选项卡显示 index.html 和 index_bundle.js 的大小为 0 B（见图） 但显然情况并非如此 HTML 文件大小为 227 B & index_bundle.js 文件大小为195Kb（见图）

Chrome Devtools Elements Tab 也显示如下（见图）

我的 webpack 配置文件如下所示：

【问题讨论】：

webpack 的生产配置是什么样的？ json 字符串化配置。

添加了 webpack 配置的屏幕截图

如果您查看开发/生产配置之间的差异，您会发现只有开发配置包含devServer 节点。您可能需要考虑添加一个额外的环境参数，表明您希望进行基于生产的托管，然后相应地注入 devServer 节点。

为了证明这一点，将devServer节点复制到productionConfig中。

我将 devserver 复制到插件正上方的 productionConfig 中，但结果仍然相同

【参考方案1】：

变化

import BrowserRouter as Router from 'react-router-dom'

到：

import HashRouter as Router from 'react-router-dom'

在 App.js 中帮助我解决了我的 create-react-app 项目中的相同问题。

【讨论】：

不是一个好的解决方案，主要是在存在身份验证库的情况下。

【参考方案2】：

我有一个独特的解决方案 - 只有一个页面没有为我运行。所以我只是检查了控制台日志并发现了错误。由于某种原因，该错误仅显示“react-scripts-build”，而不是“react-scripts-start”。

这导致了一个空白页

【参考方案3】：

这些都不适合我我的错误是因为我混淆了文件夹

解决方案：

npm run build

我的 apache 配置：

没用

DocumentRoot /var/www/sites/example.com/client/public/

工作（构建文件夹不公开）

DocumentRoot /var/www/sites/example.com/client/build/

【讨论】：

这节省了很多时间

【参考方案4】：

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

基本名称：字符串 所有位置的基本 URL。如果您的应用程序是从服务器上的子目录提供的，您需要将其设置为子目录。格式正确的基本名称应该有一个前导斜杠，但没有尾随斜杠。

【参考方案5】：

GitHub Pages 不支持在底层使用 HTML5 pushState 历史 API 的路由器（例如，使用 browserHistory 的 React 路由器）。这是因为当 http://user.github.io/todomvc/todos/42 之类的 URL 重新加载页面时，其中 /todos/42 是前端路由，GitHub Pages 服务器返回 404，因为它对 /todos/42 一无所知。如果您想将路由器添加到托管在 GitHub Pages 上的项目，这里有几个解决方案：

您可以从使用 HTML5 历史 API 切换到使用哈希路由。 如果你使用 React Router，你可以切换到hashHistory 来实现这个效果，但是 URL 会更长更冗长（例如，http://user.github.io/todomvc/#/todos/42?_k=yknaj）。 Read more 关于 React Router 中不同的历史实现。 或者，您可以使用一个技巧来教 GitHub Pages 通过使用特殊的重定向参数重定向到您的 index.html 页面来处理 404。在部署项目之前，您需要将带有重定向代码的404.html 文件添加到build 文件夹，并且您需要将处理重定向参数的代码添加到index.html。你可以在in this guide找到这个技术的详细解释。

【参考方案6】：

使用

import  HashRouter  from 'react-router-dom';

而不是

import  BrowserRouter from 'react-router-dom';

别忘了在你的路由代码中替换它

<HashRouter>
  ...
</HashRouter>

【参考方案7】：

我想通了，我在使用 browserHistory 时没有设置本地服务器。如果我将其更改为 hashHistory 它就可以了。要使用 react-router 浏览器历史记录在本地测试 webpack 生产，我需要这样做配置服务器：

您的服务器必须准备好处理真实的 URL。当应用程序第一次在 / 加载时，它可能会工作，但是当用户四处导航然后在 /accounts/23 处点击刷新时，您的 Web 服务器将收到对 /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'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)

如果有人使用带有浏览器历史记录的 react-router 部署到 firebase，请执行以下操作：

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

【讨论】：

但是有一个问题——我的 index.html 加载 css 文件，bundle.js——并且服务器尝试通过“*”路由加载它——结果——在浏览器中什么也没渲染。我该如何解决？提前致谢！

所以在这个例子中你使用哈希历史？或浏览器历史记录提前感谢。我也有同样的问题

@PeakSornpaisarn 在这个例子中我使用浏览器历史记录。

这对我有用！ import HashRouter as Router from 'react-router-dom' 而不是 import BrowserRouter as Router from 'react-router-dom'。我正在尝试在 Swarm 上部署一个 React.js 站点，几个小时后，哈希路由器是我让它工作的唯一方法！