[Webpack]webpack-dev-server设置多个路径代理时，proxy顺序有要求

问题背景

前端需要调用多个不同的后台时需要使用devServer.proxy做代理

问题现象

如下图设置ETL相关接口路径代理之后

调用ETL后台接口时产生404报错

问题原因

devServer.proxy在解析代理路径并替换的时候是按顺序解析的，我配置的三个代理中，/csm/etl与/csm存在包含关系，所以在执行了第二个配置，把/csm替换为/之后，包含/csm/etl路径的接口全都被修改了；接下来再按第三个配置去匹配/csm/etl的路径就找不到了，所以接口会提示404报错

解决方法

修改配置的顺序，将复杂的路径匹配放到前面进行匹配，把被包含的元数据配置放到最后，如下图：

避免了代理干扰，代理成功，接口就掉通了

引申思考

如果多个配置之间互相存在多层的包含关系，则应该按照复杂程度大->小依次写入配置,如下图：

注意

修改webpack-dev-server配置后需要重启前端项目才能生效