Webpack DevServer 代理本地静态目录

前言

项目里需要离线切片地图，但切片地图文件很多，需求上有时无法单独提供一个独立的文件服务器或者切片服务器，放在 public 难免会在调试运行时被复制到 DevServer 上，而这个操作在低层级少量地图时还好，精确到区县的详细地图则会达到数万张以上，单次编辑就需要等待大量时间。于是想到一个思路，让 DevServer 代理这个文件夹。

方法

1. 新建一个文件夹例如 D:\map
2. 在文件夹里放入图片
3. 这里以 Vue 项目为例，Vue 项目配置文件在 vue.config.js，找到其中的 devServer.proxy，添加如下配置：

proxy: {
    // '/map' 代表访问的刚才新建的文件夹，'D:/' 代表刚才新建文件夹的父目录的路径
    '/map': 'D:/'
},

参考

DevServer | webpack