【CV】Webpack5 配置跨域代理、WebSocket代理:ws

Webpack 一般的代理配置。
项目中用到了 WebSocket、与服务端对接时，需要联调代理。

一、Webpack5设置普通代理 和 WebSocket 代理

// webpack.config.js
const path = require('path');

devServer: {
	host:'localhost', // 指定要使用的 host。如果你想让你的服务器可以被外部访问。
	port: 8888, // 指定监听请求的端口号
	open: true, // 告诉 dev-server 在服务器已经启动后打开浏览器。true 以打开你的默认浏览器。
	compress: true, // 启用 gzip compression 压缩项目体积 [true, false]
	hot: true, // 启用 webpack 的 热模块替换 特性 [true, false]
	// 开启代理 
	// https://webpack.docschina.org/configuration/dev-server/#devserverproxy
	proxy: {
      '/api': 'http://xx.xx.xxx.xx:3000', 
      // 对 /api/users 的请求会将请求代理到 http://xx.xx.xxx.xx:3000/api/users
      "/api222": {
	      "target": "ws://xx.xx.xxx.xx:3000",
	      "ws": true, // 启用 ws 代理
	      // "secure": false 
	      // [secure] 默认为 true，将不接受在 HTTPS 上运行且证书无效的后端服务器。
	      // [secure] wss 可能需要设置成 false。
      },
      // 对 /api2/users 的WebSocket 请求会将请求代理到 ws://xx.xx.xxx.xx:3000/api222/users
	},
}

二、部分资料传送门

1. Webpack5 - DevServerProxy: https://webpack.docschina.org/configuration/dev-server/#devserverproxy
2. WebSocket：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket