react history模式下的白屏問題

近期，再用react的時候,因爲不想用醜陋的hash,便將路由模式切換成history了，結果帶來了一些問題，好比刷新白屏，還有圖片加載不出來，這裏咱們說一下解決方案。

緣由

首先，咱們說一下形成這一系列現象的緣由。
咱們在http://localhost:xxxx/這個路徑下去刷新頁面是沒有問題的，一切都顯得那麼正常，可是當咱們換到一個子模塊，刷新就會白屏，爲何呢？

咱們看到，它會從當前路徑下去找bundle.js，爲何？由於HtmlWebpackPlugin插件在幫咱們引入bundle.js時，引入的是相對路徑

因此，在刷新時，它是相對於如今的url取尋找的。

解決方案

緣由一旦清楚，解決方案便呼之欲出了。咱們只要想辦法讓bundle.js的加載路徑在刷新的時候，也從根目錄開始尋找，而不是跟隨當前url便可。

1.output配置加入publicPath

output: {
    filename: 'assets/js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/"
}

publicPath是什麼意思呢？官網中有這麼一句話

webpack-dev-server 也會默認從 publicPath 爲基準，使用它來決定在哪一個目錄下啓用服務，來訪問 webpack 輸出的文件。

簡單理解，你的靜態資源，都會今後路徑下開始加載

publicPath: "/"     //加載路徑‘/assets/js/bundle.js’

這樣，每次刷新都會從根目錄開始加載，就不會丟失咱們的bundle.js了。圖片加載不出來也是這個問題。

2.webpack-dev-server的historyApiFallback

history模式下，devServer須要配置historyApiFallback爲true

devServer: {
historyApiFallback: true
}

注意以上兩點，history模式就能正常使用了。若是還有其餘緣由，歡迎你們補充。
ps:項目部署上服務器後，頁面白屏，須要後臺進行相關設置，這裏不作討論。