概述前端打包工具
由于近些年来react、vue等MVVM框架的流行，使得前端的打包工具更倾向于webpack，相比传统的打包工具gulp，grunt等，webpack对于使用vue、react等构建的单页面应用有着超强的亲和力，再加上前端模块化的大趋势，webpack对于处理模块化有着天生的神力，由此webpack自然从众多的打包工具中脱颖而出。
直入主题pathRewrite
简单来说，pathRewrite是使用proxy进行代理时，对请求路径进行重定向以匹配到正确的请求地址，话不多说，上代码，我们先来看看不使用pathRewrite的配置：
proxy: {
'/api': {
target: 'http://www.xxx.com',
changeOrigin: true
}
}
如上所示，我们现在想请求api中某一个页面的某个接口，配置代理如上，请求代码附上：
axios.get("/api/login")
.then(function(response) {
console.log(response);
});
如上所示，我们简单的使用axios进行请求。实际上，我们要请求的接口地址是：http://www.xxx.com/login配置代理/api对应的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，由此发现多了个"/api"，由此导致浏览器报404的错误，所以由此分析，我们需要去掉请求路径中多余的/api，此时我们就需要用到pathRewrite进行路径的重定向了。直接上代码如下：
proxy: {
'/api': {
target: 'http://www.xxx.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
我们加了路径的重定向代码pathRewrite，上述代码以正则匹配规则将以/api开头的请求地址修改为""，也就是说，我们这样配置后，当我们请求/api/abc的时候，会被重写为请求/abc，直接在请求地址中将/api变成了""，由此刚好去掉了请求地址中多余的/api，由此，上述的404错误就得到了解决。
原文链接：https://blog.csdn.net/weixin_40920953/article/details/85150784
