[[441416]]

寫在前面

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

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

Webpack自動編譯

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

# 我們可以先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模式雖然實現(xiàn)了我們的需求，但是方法有很多的弊端：

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

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

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

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

• 執(zhí)行webpack-dev-server命令
• 啟動http服務(wù)
• webpack構(gòu)建
• 監(jiān)視文件變化，有變化則進入新一輪webpack構(gòu)建

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

靜態(tài)資源訪問

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

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

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

為了解決這種開發(fā)階段跨域請求問題最好的方法，就是在開發(fā)服務(wù)器中配置一個后端api的代理服務(wù)，把后端接口服務(wù)代理到本地的開發(fā)服務(wù)地址。我們可以添加pathRewrite屬性來實現(xiàn)代理路徑重寫，重寫規(guī)則就是把路徑開頭的/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提升我們的本地開發(fā)效率，其實就是使用了webpack的代理模式，在請求目標接口時通過本地代理請求，能夠避免開發(fā)階段的跨域問題。