由于系统业务比较复杂,微前端(多页应用)实现期望用一个app一个webpack的形式,这样可以更好隔离,而且每个app的webpack config可以定制。

Nginx在前端项目中安装比较麻烦,所以考虑用nodejs来代理,社区比较成熟的node代理显然就是express的http-proxy-middleware了:

var express = require('express')
var proxy = require('http-proxy-middleware')
var rewrite = require('express-urlrewrite') var app = express() let options = {
'/report/template': {
target: 'http://www.wenming.cn',
pathRewrite: {
'^/report/template': '',
},
headers: {
"Host": "www.wenming.cn",
"Connection": "keep-alive",
"Cache-Control": "max-age=0",
"Upgrade-Insecure-Requests": "1",
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36",
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3",
"Accept-Encoding": "gzip, deflate",
"Accept-Language": "zh-CN,zh;q=0.9",
"Cookie": "wdcid=118bf0416992ec45; wdlast=1553783233; Hm_lvt_3bdce7455c04dfb8cf1a26c3ac808bea=1553783233; Hm_lpvt_3bdce7455c04dfb8cf1a26c3ac808bea=1553783233",
}
},
'/report':{
target: 'http://localhost:8090',
pathRewrite: {
'^/report': '',
},
}
} app.use('/app/home', (req,res,next) => {
req.originalUrl = req.originalUrl.replace(/^\/app\/home/, '')
next()
});
app.use(rewrite('/app/home/*', '/$1')) function proxyFactory(source, option) {
app.use(source, proxy(option))
}
for (let key in options) {
proxyFactory(key, options[key])
}
app.use('/', (req, res) => {
res.send('not found!!')
})
app.listen(3000)

webpack-dev-server同时起多个:

const execa = require('execa')

execa('webpack-dev-server', ['--entry', './apps/alarm.js', '--port', '8044', '--config', './webpack.js'], {stdio: 'inherit'})
execa('webpack-dev-server', ['--entry', './apps/report.js', '--port', '8045', '--config', './webpack.js'], {stdio: 'inherit'})

express起一个代理服务器,webpack-dev-server同时起多个的更多相关文章

  1. 笔记:配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  2. [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

    Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...

  3. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  4. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  5. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  6. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  7. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

  8. 利用express启一个server服务

    安装express $ npm install express --save 在node.js中,我们最常用的框架就是express Express 是一个基于 Node.js 平台的极简.灵活的 w ...

  9. Vue.js如何搭建本地dev server和json-server 模拟请求服务器

    前言:vue-cli(版本更新),由原来的2.8.1升级为2.9.1.主要改变是原来在build文件夹下的dev-server.js删掉了,增加了webpack.dev.conf.js. 所以这次讲的 ...

随机推荐

  1. Dynamics 365-关于Solution的那些事(三)

    这一篇的内容,是关于Solution的使用建议的,如果大家有什么实用的建议,欢迎留言讨论. 一. 版本控制 Solution是有版本号的,率性的人可能在新建一个solution的时候,直接赋值1.0, ...

  2. 记录Javascript的数据方法参考

    concat >>连接2个或更多数组,并返回结果 var arr1 = [1,2,3]; var arr2 = [-1,-2,-3]; console.log(arr1.concat(ar ...

  3. 在比特币的OP_RETURN上,大家都干了些啥?

    我在之前的一篇文章中介绍了怎么通过C#将一句话写入到比特币的区块链网络中,最近花了好几天的时间,我终于把比特币的区块链数据载入到了SQLServer(具体做法参加我的这篇博客:http://www.c ...

  4. React 系列教程2:编写兰顿蚂蚁演示程序

    简介 最早接触兰顿蚂蚁是在做参数化的时候,那时候只感觉好奇,以为是很复杂的东西.因无意中看到生命游戏的 React 实现,所以希望通过兰顿蚂蚁的例子再学习一下 React. 兰顿蚂蚁的规则非常简单: ...

  5. FB商务管理平台(Business Manager) (2)

    Business Manager 商务管理平台(以下简称BM)API 一站式管理广告帐户.主页及相关的工作人员. BM功能结构(其中:账户下的节点属于市场营销API) API / SDK FB提供了多 ...

  6. Charles(V3.10.1)的抓包以及常见功能的使用

    一.Charles的安装 安装都不会,那就不用再往下看了.(*^__^*) 嘻嘻…… 二.HTTP抓包 1.查看电脑IP地址 2.设置手机的HTTP代理 手机连接到同一WiFi下设置HTTP代理: 服 ...

  7. Robust PCA via Outlier Pursuit

    目录 引 主要结果 定理1 定理2 理论证明 构造Oracle Problem 算法 Xu H, Caramanis C, Sanghavi S, et al. Robust PCA via Outl ...

  8. Maven运行报错

    在创建Maven项目时,出现报错:No goals have been specified for this build pom.xml文件加入  <build><defaultGo ...

  9. How do I copy files that need root access with scp

    server - How do I copy files that need root access with scp? - Ask Ubuntuhttps://askubuntu.com/quest ...

  10. 一入OI深似海 4 —— 纪念我最后一次PJ(中)

    不知道怎么回事,直到比赛前10分钟才放我们进考场. 考场在体育馆里面,很大很壮观. 我匆匆忙忙地找到位子,屁股还没坐热,被老师告知不能带水. what?! 于是我只好把水放在统一放私人物品的地方. 电 ...