前言
在前端开发中，我们经常会使用 webpack 来构建我们的项目。而在开发中，可能会需要与其他服务器进行交互，这时候就需要使用代理进行访问。那么如何使用 webpack 来实现代理呢？这就需要使用一个叫做 webpack-proxy-plugin 的 npm 包。
webpack-proxy-plugin 是什么
webpack-proxy-plugin 是一个 webpack 插件，用于在 webpack 打包时配置代理。它基于 http-proxy-middleware 实现，可以简单且方便地设置代理，支持多种代理方式。
安装和使用
在项目中使用 webpack-proxy-plugin，需要先安装它：
npm install webpack-proxy-plugin --save-dev
在 webpack 的配置文件中配置插件：
-- -------------------- ---- -------
----- ------------------ - --------------------------------
-------------- - -
-----
-------- -
--- --------------------
-- ------
--
-
--代理列表将会按顺序被应用。如果请求与多个规则匹配，则匹配顺序靠前的优先级更高。下面看一下具体如何配置。
配置
在配置中，可以设置各种代理规则。下面是一个例子，使得 /api 下的请求代理到 http://localhost:3000 上。
new WebpackProxyPlugin({
'/api': {
target: 'http://localhost:3000'
}
})可以看到，这里的配置非常简单，只需要一个对象，对象的 key 就是代理规则，value 就是代理的配置。除此之外，还支持如下的配置：
| 配置项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| target | string | '' | 目标服务器地址 |
| changeOrigin | boolean | false | 是否改变源地址 |
| ws | boolean | false | 是否支持 websocket |
| pathRewrite | object | {} | 路径重写 |
| router | object | {} | 路由映射 |
target
target 是一个必填项，需要设置代理到哪个服务器上。可以是一个字符串或者一个对象。如果是字符串，则表示目标服务器的地址；如果是对象，则可以设置各种配置项。
-- -------------------- ---- -------
--- --------------------
------- -
------- -
----- ------------
----- -----
--------- ------
-
-
--changeOrigin
如果目标服务器不是当前服务器，则需要设置 changeOrigin 为 true，以避免错误的解析 host。
new WebpackProxyPlugin({
'/api': {
target: 'http://other-server.com',
changeOrigin: true
}
})ws
如果想要支持 websocket，则需要设置 ws 为 true。
new WebpackProxyPlugin({
'/api': {
target: 'http://other-server.com',
ws: true
}
})pathRewrite
pathRewrite 用于转换路径。比如，如果请求的路径是 /public/a/b，则可以使用 pathRewrite 转换为 /a/b。
new WebpackProxyPlugin({
'/api': {
target: 'http://other-server.com',
pathRewrite: {
'^/api': '/api/v1'
}
}
})这里的 '^/api' 是一个正则表达式，表示匹配 /api 开头的路径，并将它替换为 /api/v1。
router
router 用于路由映射。比如，如果每个请求的主机名都不同，则可以使用 router 映射到不同的主机名。
-- -------------------- ---- -------
--- --------------------
------- -
------- --------------------------
------- -
--------------------- --------------------------
--------------- --------------------
-
-
--这里的映射意思是，如果请求的主机名是 api.localhost:3000，则代理到 http://other-server.com；如果请求的主机名是 api.dev:3000，则代理到 http://192.168.1.1。
示例代码
下面是一个完整的配置示例代码：
-- -------------------- ---- -------
----- ------------------ - --------------------------------
-------------- - -
-----
-------- -
--- --------------------
------- -
------- ------------------------
------------- -----
--- -----
------------ -
-------- ---------
-
-
--
-
--总结
配置 webpack 代理，可以让前端应用方便地与后端服务器交互。webpack-proxy-plugin 是一个非常好用的 npm 包，可以简单地配置代理规则。通常情况下，我们只需要配置 target 和 pathRewrite 就够了。希望这篇文章能够帮助你更好地了解和使用 webpack-proxy-plugin。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005572f81e8991b448d421c