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 配置的基本用法如下所示：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
------ -
------- -
------- ------------------------
------------- -----
--
--
--
--上述代码中，proxy 对象中的 /api 表示需要转发的请求路径前缀，target 表示需要转发到的后端 API 地址，changeOrigin 表示是否需要改变请求头中的 host 值。在这个例子中，所有以 /api 开头的请求都会被转发到 http://localhost:3000 地址。
1.2 多目标转发
有时候，我们需要将请求转发到多个后端 API 地址上。这时，可以使用多个 proxy 对象来实现：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
------ -
------- -
------- ------------------------
------------- -----
--
------- -
------- ------------------------
------------- -----
--
--
--
--上述代码中，所有以 /api 开头的请求都会被转发到 http://localhost:3000 地址，所有以 /foo 开头的请求都会被转发到 http://localhost:8080 地址。
1.3 路径重写
有时候，后端 API 地址和前端请求地址不一致。这时，可以使用路径重写来实现：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
------ -
------- -
------- ------------------------
------------- -----
------------ -
-------- ----------
--
--
--
--
--上述代码中，所有以 /api 开头的请求会被转发到 http://localhost:3000/v1/api 地址。这是通过 pathRewrite 属性实现的，它将 /api 替换为 /v1/api。
2. rewrite 配置
除了 proxy 配置之外，webpack-dev-server 还支持 rewrite 配置。rewrite 配置可以将请求重写为指定的地址，从而实现 URL 重定向等功能。
2.1 基本用法
rewrite 配置的基本用法如下所示：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
------------------- -----
----- -----
----------- ----
------------ -----------
------- -----
---- -----
----- ----------
------ --------------
------- ------------- -
--------------- ------------- ---- -
---------------------
---
--
--
--上述代码中，before 函数中的 app.use 方法将所有以 /foo 开头的请求重定向到 /bar 地址。
2.2 正则表达式匹配
和 proxy 配置类似，rewrite 配置也支持正则表达式匹配：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
------------------- -----
----- -----
----------- ----
------------ -----------
------- -----
---- -----
----- ----------
------ --------------
------- ------------- -
---------------------- ------------- ---- -
-------------------- - ---------------
---
--
--
--上述代码中，before 函数中的 app.use 方法将所有以 /foo 开头的请求重定向到 /bar 地址，并将路径中的参数传递到新的 URL 中。
3. 总结
本文介绍了 webpack-dev-server 的 proxy 和 rewrite 配置，希望能为前端开发者提供指导和帮助。proxy 配置可以将请求转发到后端 API 地址，从而实现前后端分离开发；rewrite 配置可以将请求重写为指定的地址，从而实现 URL 重定向等功能。在使用这些配置时，需要注意路径匹配和路径重写等细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657bb7b3d2f5e1655d65ce5f