[[441416]]

寫在前面

我們知道在開發中需要先將源代碼進行打包后，再進行運行而后在瀏覽器打開，每次修改都要遵循這個步驟。那么，有沒有什么方法可以省略這么多的繁瑣步驟呢?有，但是必須遵守下面的要求：

• 必須能夠使用HTTP服務運行而不是以文件形式預覽。這樣可以更加接近生產環境狀態，而且項目中可能需要使用ajax類的api，以文件訪問會產生諸多問題
• 在我們修改代碼后，webpack能夠實現自動完成構建，然后瀏覽器可以即時顯示最新的運行結果，這樣可以減少開發過程中額外的重復操作，同時可以讓我們更加專注，效率得到提升
• 需要能夠提供Source Map支持。這樣，運行過程中出現的錯誤可以快速定位到源代碼中的位置，而不是打包后結果中的位置，更便于我們快速定位錯誤、調試應用

Webpack自動編譯

關于webpack自動編譯可以完全符合以上要求，具體的用法是：啟動webpack時，添加一個--watch的cli參數，webpack就會以監視模式啟動運行，打包完成后cli不會立即退出，而是等待文件變化再次工作，知道我們手動結束它或出現不可控的異常。

# 我們可以先npm 全局安裝browser-sync模塊，然后使用這個模塊 
$ npm i browser-sync -g 
$ browser-sync dist --watch 
 
#或者使用npx直接使用遠端模塊 
$ npx browser-sync dist --watch 

我們看到運行終端后的顯示：

npx browser-sync dist --watch 
[Browsersync] Access URLs: 
 --------------------------------------- 
       Local: http://localhost:3000 
    External: http://192.168.99.161:3000 
 --------------------------------------- 
          UI: http://localhost:3001 
 UI External: http://localhost:3001 

我們看到這種webpack+browser-sync模式雖然實現了我們的需求，但是方法有很多的弊端：

• 操作繁瑣，我們需要同時使用兩個工具，需要了解內容更多、學習成本提高
• 效率低下，因為整個過程中webpack會將文件寫入磁盤，browser-sync再進行讀取，過程會設計到大量磁盤讀寫操作，導效率低下

對此，webpack官方推出了開發工具，能夠提供一個開發服務器，并且自動編譯和自動刷新瀏覽器等一系列對開發友好的功能全部集成在一起。推出初衷就是為了提高開發者日常的開發效率，使用這個工具就可以解決前面的問題。

$ npm i webpack-dev-server -D 
$ npx webpack-dev-server 

運行webpack-dev-server命令時，wbepack內部會自動啟動http-server服務，為我們生成的靜態文件提供server服務，并且為我們生成的文件提供打包服務。其工作流程大概是：

• 執行webpack-dev-server命令
• 啟動http服務
• webpack構建
• 監視文件變化，有變化則進入新一輪webpack構建

要注意的是，webpack-dev-server為了提升打包效率，并未將文件寫入磁盤中，而是將文件暫存到內存中，再通過http-server進行獲取文件，減少了不必要的磁盤讀寫操作。

靜態資源訪問

webpack-dev-server會默認將構建結果和輸出文件全部作為開發服務器的資源文件，只要通過webpack打包能夠輸出的文件就可以直接被訪問使用。

在實際使用webpack時，一般會將copy-webpack-plugin這種插件留在上線前的那次打包使用，而在開發過程中一般不會使用。因為在開發過程中，我們會頻繁執行打包任務，假設此目錄文件需要拷貝的文件比較多、比較大，如果我們每次構建都需要執行插件的話，那么打包的開銷就會比較大，構建速度會下降。

在實際生產環境中能夠直接訪問的api，回到開發環境后哦，再次訪問這些api就會產生跨域請求問題。當然我們可以使用cors，但是必須后端支持。

為了解決這種開發階段跨域請求問題最好的方法，就是在開發服務器中配置一個后端api的代理服務，把后端接口服務代理到本地的開發服務地址。我們可以添加pathRewrite屬性來實現代理路徑重寫，重寫規則就是把路徑開頭的/api替換為空。這樣當我們請求代理接口http://localhost:9000/api/users就會代理請求目標接口http://api.github.com/users。

devServer:{ 
  proxy:{ 
    "/api":{ 
      target:"http://api.github.com", 
      pathRewrite:{ 
        "^/api":""//替換掉代理地址中的/api 
      } 
    } 
  }, 
  contentBase:path.join(__dirname,"dist"), 
  compress:true, 
  port:9000 
} 

參考文章

《webpack原理與實踐》

《webpack中文文檔》

寫在最后

本文主要說明了如何配置DevServer提升我們的本地開發效率，其實就是使用了webpack的代理模式，在請求目標接口時通過本地代理請求，能夠避免開發階段的跨域問題。