为什么React Webpack生产版本显示空白页面? [英] Why is React Webpack production build showing Blank page?
问题描述
我正在建立一个反应应用程序,目前 webpack-dev-server
工作正常( hello world 文本显示),但webpack -p显示空白页面。对于生成构建chrome dev工具下的网络选项卡,显示 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标签显示以下内容(见图片)
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.
快递应用程序可能如下所示:
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屋!