複習webpack4之DevServer實現請求轉發與單頁面路由

以前學習過webpack3的知識，可是webpack4升級後仍是有不少變更的，因此此次從新整理一下webpack4的知識點，方便之後複習。

此次學習webpack4不只僅要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，好比打包原理等等，因此可能會省略一些比較基礎的內容，可是但願我能夠經過這次學習掌握webpack，更好地應對之後的工做。

1.在開發過程當中請求接口

咱們正常在開發過程當中，確定會去請求接口，在先進的項目中，咱們一般使用axios來請求接口。(接口是假的，只是作例子)

這樣項目中就會去進行get請求，拿到結果並打印。

2.實現請求轉發

可是在實際開發中，開發環境和線上的接口域名每每是不同的，因此咱們一般會寫成相對路徑的形式。

只寫成這種形式是確定不行的，須要藉助devServer來實現請求轉發。

重啓服務後，會發現項目請求接口成功代理到了www.example.com這臺服務器上。在瀏覽器network中，查看請求會發現，請求的地址依舊是localhost:9000，可是已經能夠成功拿到返回值了。

3.其餘應用

3.1 請求另外一個接口

若是開發過程當中，後端接口(/api/header.json)尚未開發好，如今有一個臨時的mock接口(/api/demo.json)，也能夠經過配置來實現這種需求。

這樣咱們在開發時，直接請求正式接口地址，可是經過proxy作一層代理，實際取的是/api/demo.json中的數據，這樣就避免了手動替換接口。

3.2 請求https接口

當咱們要請求https協議的接口時，要增長一個配置項。

3.3 bypass 攔截

這段代碼的意思是，若是請求的是一個.html路徑，那麼就直接返回根路徑下index.html中的內容。

若是改爲return false，意思是若是請求的是一個.html路徑，就跳過這條轉發規則，不通過轉發，直接返回內容。

3.4 根目錄下的代理

若是想對接口根目錄下進行代理，須要這樣配置。

3.5 changeOrigin

有些網站會對origin作限制，致使咱們拿不到數據，因此咱們在寫轉發規則的時候，通常都會加這個配置。

實際proxy的配置項還有不少，好比設置請求頭，設置cookie等等，等咱們再須要更多配置的時候，去查閱文檔就能夠了。

注：webpack devServer只在開發環境中生效，在線上時不會有任何效果。

4.單頁面路由

咱們開發單頁面應用的時候，配置完路由後，進入/list頁面，有時候會遇到cannot GET /list狀況，這是爲何呢？由於服務器覺得咱們要訪問後端list頁面，因此就會提示咱們頁面不存在，那麼要怎麼解決呢？

咱們要在devServer中配置一個配置項。

原理是配置完後，如今不管訪問服務器的任何一個路徑，都會把請求轉換爲對根路徑的請求，即index.html

historyApiFallback還能夠配置爲一個對象。

意思是，若是訪問abc.html，就代理到list.html。

當代碼上線後，devServer就很差用了，因此須要後端小夥伴仿照historyApiFallback修改配置。