如何通过Webpack Dev Server配置指定URL的301 Redirect？

当然可以用 Webpack Dev Server 实现 301 永久重定向！你之前用 proxies 和 rewrites 没生效，大概率是因为目标 URL 里带了 #（哈希路由），而 rewrites 主要是做内部路由重写（不会改变浏览器地址栏），没法直接处理哈希的拼接。下面给你两种可行的配置方案：

方案一：使用 setupMiddlewares（Webpack 5+ 推荐） #

Webpack 5 及以上版本推荐用 setupMiddlewares 来扩展 Dev Server 的中间件，配置如下：

module.exports = {
  // 你的其他 Webpack 配置...
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      // 添加自定义重定向中间件，匹配所有 /setup/ 开头的 GET 请求
      devServer.app.get('/setup/*', (req, res) => {
        // 提取原请求的查询参数（比如 ?code=some-code）
        const queryString = req.url.split('?')[1] || '';
        // 拼接目标 URL，保留原路径和查询参数
        const redirectUrl = `/app/#/setup${req.path}${queryString ? `?${queryString}` : ''}`;
        // 发送 301 永久重定向响应
        res.redirect(301, redirectUrl);
      });

      return middlewares;
    },
  },
};

方案二：使用 before 钩子（兼容旧版本 Webpack） #

如果你的 Webpack 版本低于 5，可以用 before 钩子来添加自定义中间件：

module.exports = {
  // 你的其他 Webpack 配置...
  devServer: {
    before: (app, server) => {
      app.get('/setup/*', (req, res) => {
        const queryString = req.url.split('?')[1] || '';
        const redirectUrl = `/app/#/setup${req.path}${queryString ? `?${queryString}` : ''}`;
        res.redirect(301, redirectUrl);
      });
    },
  },
};

关键说明 #

• 为什么 rewrites 没生效？devServer.rewrites 是服务器内部的路径重写，不会向浏览器发送重定向响应，所以浏览器地址栏不会变化。而你需要的是浏览器地址栏可见的跳转，必须通过发送 301 响应实现。
• 哈希部分（# 后面的内容）是由浏览器处理的，服务器无法读取，但我们可以直接拼接在 URL 里，浏览器会自动识别并处理哈希路由。

验证方法 #

启动 Webpack Dev Server 后，访问 http://localhost:8080/setup/xyz/?code=some-code，浏览器地址栏应该自动跳转到 http://localhost:8080/app/#/setup/xyz/?code=some-code，打开开发者工具的「网络」面板，可以看到响应状态码为 301。

内容的提问来源于stack exchange，提问作者Costantin