webpack-dev-server與單頁應用路由

首先是三個使用React編寫的文件：

index.js：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BroswerRouter, Route } from 'react-router-dom';
import Home from './Home';
import List from './List';
class App extends Component {
    render(){
        return (
            <BroswerRouter>
                <Route path='/' component={Home}/>
                <Route path='/list' componnet={List}/>
            </BroswerRouter>
        );
    }
}

Home.js：

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return (
            <div>
                HomePage
            </div>
        );
    }
}

export default Home;

List.js：

import React, { Component } from 'react';

class List extends Component {
    render() {
        return (
            <div>
                ListPage
            </div>
        );
    }
}

export default List;

從上面代碼可以看見，我實現了一個及其簡單的前端路由。

啓動webpack-dev-server的服務之後，可以通過localhost:8080訪問到首頁，也就是Home模塊渲染出來的頁面：

那麼按照預期，當我們在地址欄中輸入localhost:8080/list的時候便會顯示出List模塊所渲染的頁面，可是事與願違：

會發現瀏覽器提示找不到這個資源，原因在於，通過地址欄直接輸入地址，瀏覽器會想後端也就是webpack-dev-server請求list.html這個資源，而我們並沒有，自然就會出現錯誤。

那怎麼解決這個問題呢？

需要設置在配置文件中設置devServer.historyApiFallback：

{
   ...,
   devServer: {
       ...,
       historyApiFallback: true
   }
}

這個配置項的作用是，當產生任意的404響應都會被替代爲index.html。

可以想見，當向webpack-dev-server請求list.html時，會產生404響應，於是就返回了index.html，而目前地址欄中URL的路徑是/list，於是React Router根據我們寫的路由規則跳轉到List模塊。

（只是通過在地址欄輸入URL來訪問會出現這種問題，而在應用中則根本不會出現頁面的刷新，也就不會產生向後端的請求，直接切換到List）

---

查看官方文檔我們知道，這個功能的實現是使用了connect-history-api-fallback這個包。

而這個包還有其他的一些配置。

historyApiFallback: {
  rewrites: [
    { from: /\/soccer/, to: '/soccer.html'}
  ]
};

上面這樣的配置就是指，當請求路徑爲/soccer時，就返回/scoccer.html這個頁面。

而我們將historyApiFallback設置爲true，則代表着請求路徑無論是什麼，都跳轉到index.html由前端路由決定跳轉。

---

historyApiFallback: {
  rewrites: [
     {
      from: /^\/libs\/.*$/,
      to: function(context) {
        return '/bower_components' + context.parsedUrl.pathname;
      }
    }
  ]
};

甚至還可以這麼寫，可以通過一個函數，來獲得請求路徑的相關信息，再根據這些信息返回相關頁面。