概述前端打包工具
由于近些年來react、vue等MVVM框架的流行，使得前端的打包工具更傾向于webpack，相比傳統(tǒng)的打包工具gulp，grunt等，webpack對于使用vue、react等構(gòu)建的單頁面應(yīng)用有著超強的親和力，再加上前端模塊化的大趨勢，webpack對于處理模塊化有著天生的神力，由此webpack自然從眾多的打包工具中脫穎而出。

直入主題pathRewrite
簡單來說，pathRewrite是使用proxy進行代理時，對請求路徑進行重定向以匹配到正確的請求地址，話不多說，上代碼，我們先來看看不使用pathRewrite的配置：

proxy: {
   '/api': {
      target: 'http://www.xxx.com',
      changeOrigin: true
   }
}

如上所示，我們現(xiàn)在想請求api中某一個頁面的某個接口，配置代理如上，請求代碼附上：

axios.get("/api/login")
.then(function(response) {
  console.log(response);
});

如上所示，我們簡單的使用axios進行請求。實際上，我們要請求的接口地址是：http://www.xxx.com/login配置代理/api對應(yīng)的target為:http://www.xxx.com，那么當我們不使用pathRewrite進行路徑重定向的時候，加入我們像上述axios的代碼那樣進行請求時，我們代碼中的GET請求是/api/login，此時由于proxy的配置，此請求會被代理成http://www.xxx.com/api/login，顯然可以看出，我們的請求地址中多了個/api，此時瀏覽器會報404錯誤，此時我們就需要用到pathRewrite重定向功能。

其實，不難看出，當我們配置了代理后，我們請求的地址前面會自動的加上我們所代理的地址，就上述我們的配置舉個例子來說，就是，當我們代碼中請求的地址是/api/abc的時候，我們真實請求的地址是http://www.xxx.com/api/abc(前面會自動的加上我們所代理的地址)。

回歸到最初的例子，當我們請求/api/login時，我們實際上請求的是http://www.xxx.com/api/login，而真實的正確地址是http://www.xxx.com/login，由此發(fā)現(xiàn)多了個"/api"，由此導(dǎo)致瀏覽器報404的錯誤，所以由此分析，我們需要去掉請求路徑中多余的/api，此時我們就需要用到pathRewrite進行路徑的重定向了。直接上代碼如下：

proxy: {
  '/api': {
      target: 'http://www.xxx.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '/'
     }
  }
}

我們加了路徑的重定向代碼pathRewrite，上述代碼以正則匹配規(guī)則將以/api開頭的請求地址修改為""，也就是說，我們這樣配置后，當我們請求/api/abc的時候，會被重寫為請求/abc，直接在請求地址中將/api變成了""，由此剛好去掉了請求地址中多余的/api，由此，上述的404錯誤就得到了解決。

原文鏈接：https://blog.csdn.net/weixin_40920953/article/details/85150784