[[441416]]

寫在前面

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

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

Webpack自動(dòng)編譯

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

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

我們看到運(yùn)行終端后的顯示：

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

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

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

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

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

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

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

靜態(tài)資源訪問

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

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

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

為了解決這種開發(fā)階段跨域請(qǐng)求問題最好的方法，就是在開發(fā)服務(wù)器中配置一個(gè)后端api的代理服務(wù)，把后端接口服務(wù)代理到本地的開發(fā)服務(wù)地址。我們可以添加pathRewrite屬性來實(shí)現(xiàn)代理路徑重寫，重寫規(guī)則就是把路徑開頭的/api替換為空。這樣當(dāng)我們請(qǐng)求代理接口http://localhost:9000/api/users就會(huì)代理請(qǐng)求目標(biāo)接口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原理與實(shí)踐》

《webpack中文文檔》

寫在最后

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