webpack-dev-server 的 proxy 和 rewrite 配置详解-JavaScript中文网-JavaScript教程资源分享门户

webpack-dev-server 是一个用于开发环境下的 Web 服务器，它可以方便地在本地运行 Web 应用，并支持实时刷新。在前端开发中，使用 webpack-dev-server 可以大大提高开发效率。本文将详细介绍 webpack-dev-server 的 proxy 和 rewrite 配置，希望能为前端开发者提供指导和帮助。

1. proxy 配置

在开发过程中，我们经常需要通过 AJAX 请求来获取数据。在开发环境下，我们需要将这些请求转发到后端 API 接口上。这时，就需要使用 webpack-dev-server 的 proxy 配置。proxy 配置可以将请求转发到指定的后端 API 地址，从而实现前后端分离开发。

1.1 基本用法

proxy 配置的基本用法如下所示：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
};

上述代码中，proxy 对象中的 /api 表示需要转发的请求路径前缀，target 表示需要转发到的后端 API 地址，changeOrigin 表示是否需要改变请求头中的 host 值。在这个例子中，所有以 /api 开头的请求都会被转发到 http://localhost:3000 地址。

1.2 多目标转发

有时候，我们需要将请求转发到多个后端 API 地址上。这时，可以使用多个 proxy 对象来实现：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
      '/foo': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
};

上述代码中，所有以 /api 开头的请求都会被转发到 http://localhost:3000 地址，所有以 /foo 开头的请求都会被转发到 http://localhost:8080 地址。

1.3 路径重写

有时候，后端 API 地址和前端请求地址不一致。这时，可以使用路径重写来实现：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/v1/api',
        },
      },
    },
  },
};

上述代码中，所有以 /api 开头的请求会被转发到 http://localhost:3000/v1/api 地址。这是通过 pathRewrite 属性实现的，它将 /api 替换为 /v1/api。

2. rewrite 配置

除了 proxy 配置之外，webpack-dev-server 还支持 rewrite 配置。rewrite 配置可以将请求重写为指定的地址，从而实现 URL 重定向等功能。

2.1 基本用法

rewrite 配置的基本用法如下所示：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  devServer: {
    historyApiFallback: true,
    port: 8080,
    publicPath: '/',
    contentBase: './public',
    inline: true,
    hot: true,
    host: '0.0.0.0',
    stats: 'errors-only',
    before: function(app) {
      app.use('/foo', function(req, res) {
        res.redirect('/bar');
      });
    },
  },
};

上述代码中，before 函数中的 app.use 方法将所有以 /foo 开头的请求重定向到 /bar 地址。

2.2 正则表达式匹配

和 proxy 配置类似，rewrite 配置也支持正则表达式匹配：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  devServer: {
    historyApiFallback: true,
    port: 8080,
    publicPath: '/',
    contentBase: './public',
    inline: true,
    hot: true,
    host: '0.0.0.0',
    stats: 'errors-only',
    before: function(app) {
      app.use(/\/foo\/(.*)/, function(req, res) {
        res.redirect('/bar/' + req.params[0]);
      });
    },
  },
};

上述代码中，before 函数中的 app.use 方法将所有以 /foo 开头的请求重定向到 /bar 地址，并将路径中的参数传递到新的 URL 中。

3. 总结

本文介绍了 webpack-dev-server 的 proxy 和 rewrite 配置，希望能为前端开发者提供指导和帮助。proxy 配置可以将请求转发到后端 API 地址，从而实现前后端分离开发；rewrite 配置可以将请求重写为指定的地址，从而实现 URL 重定向等功能。在使用这些配置时，需要注意路径匹配和路径重写等细节。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657bb7b3d2f5e1655d65ce5f