为什么 React Webpack 生产版本显示空白页面? [英] Why is React Webpack production build showing Blank page?

问题描述

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

I'm building a react app, and at the moment webpack-dev-server works just fine( the hello world text shows up ), But webpack -p shows blank page. For the Production build The network tab under chrome dev tools, shows index.html and index_bundle.js to have size 0 B(see picture) But That is clearly not the case HTML file size is 227 B & index_bundle.js file size is 195Kb(see picture)

还有 Chrome Devtools Elements Tab 显示如下(见图)

Also Chrome Devtools Elements Tab shows the following(see picture)

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

My webpack config file looks like this:

推荐答案

我明白了，我在使用 browserHistory 时没有设置本地服务器.如果我将其更改为 hashHistory，它会起作用.要使用 react-router 浏览器历史记录在本地测试 webpack 生产，我需要这样做 配置服务器:

I figured it out, I was using browserHistory without setting up a local server. If i changed it to hashHistory it worked. To test webpack production locally with react-router browser history i needed to do this Configure a Server:

您的服务器必须准备好处理真实的 URL.当应用程序首次在/加载时，它可能会工作，但是当用户浏览并在/accounts/23 刷新时，您的 Web 服务器将收到对/accounts/23 的请求.您将需要它来处理该 URL 并在响应中包含您的 JavaScript 应用程序.

Your server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /accounts/23 your web server will get a request to /accounts/23. You will need it to handle that URL and include your JavaScript application in the response.

一个 express 应用可能如下所示:

An express app might look like this:

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，请执行以下操作:

And just in case anyone is deploying to firebase using react-router with browser-history do this:

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

这篇关于为什么 React Webpack 生产版本显示空白页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！