用webpack-serve一份配置同时搞定SPA路由回退与API代理

【免费下载链接】webpack-serveRepository has moved:项目地址https://gitcode.com/gh_mirrors/we/webpack-serve点击查看免费下载webpack-serve是一个轻量、现代的 webpack 开发服务器。对于单页应用SPA来说开发时最常踩的两个坑是前端路由刷新返回 404以及接口跨域无法调用。好消息是你不需要在webpack-serve之外再搭一层代理——只需一份serve配置就能同时完成 SPA 路由回退history fallback和 API 代理proxy让本地开发一步到位。一、先认识 add 扩展选项webpack-serve的核心理念是保持精简把扩展能力交给使用者。它的serve配置中有一个add选项接收一个函数参数是 Koa 应用实例app、中间件访问器middleware和内部options。在 lib/app.js 中可以看到服务器启动时会在绑定端口前执行options.add这就是你往开发服务器里塞自定义中间件的官方入口serve: { add: (app, middleware, options) { // 这里添加路由回退、API 代理等中间件 } };serve配置可以直接写在webpack.config.js的serve属性里也可以放在.serverc、serve.config.js等文件中详见 README.md。二、SPA路由回退一行接入 connect-history-api-fallback当你用history模式的前端路由如react-router的BrowserRouter时直接访问localhost:8080/user/42或刷新页面服务器找不到这个路径就会返回 404。connect-history-api-fallback中间件的作用就是把这类本该 404 的请求改写回index.html交给前端路由自行处理。官方示例见 docs/addons/history-fallback.config.js核心只有两行app.use(convert(history()));其中koa-connectconvert负责把 connect 风格的中间件适配到 Koa。完整配方里还设置了content: [__dirname]来提供静态文件。三、API代理http-proxy-middleware 转发请求前端调用/api/*接口时跨域最简单的办法是让开发服务器把/api前缀的请求转发到真正的后端服务http-proxy-middleware就能做到app.use(convert(proxy(/api, { target: http://localhost:8081 })));这条规则会把所有localhost:8080/api/*的请求转发到localhost:8081/api/*如果后端接口不带/api前缀只需加上pathRewrite: { ^/api: }即可去掉前缀。四、终极配方一份 serve 配置同时搞定两者把上面两部分合并就是官方推荐的组合方案完整示例在 docs/addons/proxy-history-fallback.config.jsmodule.exports.serve { content: [__dirname], add: (app, middleware, options) { // ① 先代理 /api 请求到后端 app.use(convert(proxy(/api, { target: http://localhost:8081 }))); // ② 再兜底做路由回退 app.use(convert(history())); } };顺序很关键代理规则必须放在路由回退之前。这样/api开头的请求先被拦截转发其余非静态文件请求才落进 fallback 返回index.html两者互不干扰。运行方式保持简洁$ webpack-serve ./webpack.config.js启动后访问http://localhost:8080前端路由可随意跳转刷新/api接口也直接走通不再需要浏览器插件开跨域。五、进阶玩法与常见坑代理需要排在内置中间件之后默认webpack-serve会在最后追加 webpack 与静态内容中间件。如果你的自定义路由如koa-router必须最后执行可在add中主动调用middleware.webpack()和middleware.content()接管顺序参考 docs/addons/proxy-router.config.js。静态文件优先级默认 webpack 产物优先于静态文件想让静态文件优先调用middleware.content()时注意顺序即可。--no-reload与--openCLI 支持--open自动打开浏览器、--port指定端口默认 8080完整参数用webpack-serve --help查看。更多扩展思路docs/addons/ 目录还收录了 gzip 压缩express-compress.config.js、局域网 IP 绑定local-ip.config.js、监听静态内容变化watch-content.config.js等配方可举一反三。⚠️ 注意webpack-serve官方已宣布弃用并推荐使用webpack-dev-server。但如果你维护的老项目正基于它本文的add中间件组合模式依然清晰可用且这套proxy history fallback的思路迁移到webpack-dev-server的devServer配置中几乎一比一成立。小结需求中间件效果SPA 刷新/深链 404connect-history-api-fallback非接口请求回退到 index.html/api接口跨域http-proxy-middleware请求透明转发到后端服务掌握add选项后webpack-serve的开发服务器就从只能跑页面升级成页面 路由 接口一站就绪。照着 docs/addons/proxy-history-fallback.config.js 抄一份今天就能省掉跨域调试的时间。赞分享【免费下载链接】webpack-serveRepository has moved:项目地址https://gitcode.com/gh_mirrors/we/webpack-serve点击查看免费下载相关推荐Snowpack 路由配置实战指南SPA 回退、API 代理与 WebSocket 转发Snowpack 路由配置实战指南SPA 回退、API 代理与 WebSocket 转发 Snowpack 作为 ESM 驱动的开发服务器本身不关心你的应用前端开发工具前端构建Puter 网站托管站点配置指南用 .puter_site_config 实现 SPA 路由回退与自定义 404 页面Puter 网站托管站点配置指南用 .puter_site_config 实现 SPA 路由回退与自定义 404 页面 Puter 为用户托管的静态网站免费后端前端AI 应用Triton Ascend Layout-transform / Permutation 代码生成要点Triton Ascend Layout transform / Permutation 代码生成要点 当算子为 permute 、 transpose 、 rAI 技能人工智能AI 评测CANNAscend创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考