env-manage-webpack-plugin
v0.0.5
Published
[![npm][npm]][npm-url] [![node][node]][node-url] ![npm](https://img.shields.io/npm/dw/env-manage-webpack-plugin.svg)
Downloads
2
Maintainers
Readme
env-manage-webpack-plugin
环境管理插件
当有多个开发环境需要联调时,每次切换开发环境都需要重启 webpack
而通过 env-manage-webpack-plugin
来代理这些需要转发的请求,环境切换时只需要重启代理的服务器而不是重启整个 webpack,还可以同时启动多个代理服务器链接多个环境。
安装 Install
安装 env-manage-webpack-plugin
npm i -D env-manage-webpack-plugin
或
pnpm i -D env-manage-webpack-plugin
使用 Usage
添加 webpack 插件
webpack.config.js
const EnvManageWebpackPlugin = require("env-manage-webpack-plugin");
const path = require("path");
module.exports = {
devServer: {
proxy: [
{
context: ["/simple"],
target: "http://localhost:3010",
changeOrigin: true,
},
{
context: ["/two"],
target: "http://localhost:3099",
changeOrigin: true,
},
],
},
plugins: [
// 添加插件
new EnvManageWebpackPlugin({
envConfigPath: path.resolve(__dirname, "./env.config.js"),
}),
],
};
配置完成之后,使用 webpack server
启动,然后访问 /webpack-env-manage
,即可查看环境管理页面。
env-manage-webpack-plugin 共有两个配置项
envConfigPath
: 用于指定配置文件的位置,默认使用项目目录下的env.config.js
;basePath
:env-manage-webpack-plugin
服务前缀,默认/webpack-env-manage
,如果和env-manage-webpack-plugin
的服务路径出现冲突,可通过此配置调整;fallbackTarget
对于代理服务器来说,所有未配置的转发的请求,都会回退到这个服务器上,一般无需提供,默认即为webpack-dev-server
启动的地址;proxy
未使用webpack-dev-server
时,使用此选项设置转发配置
env.config.js
const getEnvConfig = () => {
return {
envList: [
{
name: "1号测试环境",
localPort: "3001",
fallbackTarget: "",
target: {
"http://localhost:3010": "http://localhost:3011",
"http://localhost:3099": "http://localhost:3020",
},
},
{
name: "222号测试环境",
target: "http://localhost:3012",
localPort: "3002",
},
{
name: "333号测试环境",
target: "http://localhost:3013",
localPort: "3003",
},
],
};
};
module.exports = getEnvConfig;
name String
环境名称用于展示
target Object|String
环境地址
类型为
String
webpack 配置中的devServer.proxy
中配置的所有代理都将会被转发到该地址;类型为
Object
将根据配置进行转发
用于环境中多个 IP 情况。
例如,两个接口 /simple
和 /two
分别请求不同的 http://localhost:3010
和 http://localhost:3099
,
// webpack.config
......
proxy: [
{
context: ["/simple"],
target: "http://localhost:3010",
changeOrigin: true,
},
{
context: ["/two"],
target: "http://localhost:3099",
changeOrigin: true,
},
],
......
第二个环境的,两个接口 /simple
和 /two
分别请求不同的 http://localhost:3011
和 http://localhost:3020
,env.config.js
配置如下:
// env.config.js
const getEnvConfig = () => {
return {
envList: [
{
name: "1号测试环境",
localPort: "3001",
target: {
"http://localhost:3010": "http://localhost:3011",
"http://localhost:3099": "http://localhost:3020",
},
},
],
};
};
module.exports = getEnvConfig;
webpack.config.js
中的devServer.proxy
中的target
的属性即为envList[].target
对象的key
router
路由配置,将会直接替换所有的 proxy
中的router配置
localPort
本地服务端口,未提供或者提供的端口被占用时,将会自动寻找可用端口.
index
首页地址 {protocol}://{host}:{localPort}{index}
;