爲什麼React Webpack生產版本顯示空白頁？

我正在構建一個反應應用程序，並且此刻webpack-dev-server工作正常（hello world文本顯示），但是webpack -p顯示空白頁面。對於Production構建chrome開發工具下的網絡選項卡顯示index.html和index_bundle.js具有大小0 B（請參見圖片）但顯然不是這種情況HTML文件大小爲227 B & index_bundle.js文件大小爲195Kb（見圖片）爲什麼React Webpack生產版本顯示空白頁？

而且鉻Devtools元素選項卡顯示以下（見圖片）

我的WebPack配置文件看起來是這樣的：

來源

2016-05-31 jasan

什麼是您的生產配置看起來像webpack？ json將配置串聯起來。 – ctrlplusb

添加了webpack配置的屏幕截圖 – jasan

如果查看開發/生產配置之間的區別，您將看到只有開發配置包含'devServer'節點。您可能需要考慮添加一個額外的環境參數，表明您希望執行基於生產的託管，然後相應地注入devServer節點。 – ctrlplusb

我想通了，我是用browserHistory無需設置LOCA l服務器。如果我將其改爲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)

以防萬一有人被部署到火力使用反應路由器與瀏覽器的歷史記錄做到這一點：

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

來源

2016-06-01 00:51:17 jasan

但有一個問題 - 我的index.html加載CSS文件，bundle.js - 和服務器嘗試加載它通過「*」路線 - 和結果 - 在瀏覽器中什麼都沒有渲染，我怎麼修復這個問題？提前致謝！ – kurumkan

所以在這個例子中你使用哈希歷史？或瀏覽器歷史感謝提前。我有同樣的問題 –

@PeakSornpaisarn在這個例子中我是使用瀏覽器歷史記錄 – jasan

爲什麼React Webpack生產版本顯示空白頁？

回答

相關問題