前言
一直以来公司的前端项目都是一个项目一个vue-cli生成的SPA，然后放入不同的业务画面的iframe中。
起初，只有一两个项目时，代码管理和开发还是比较轻松的。但当老系统逐渐拆分，新项目的不断启动，问题就来了。
问题
项目的创建
项目越来越多，每一个都需要单独vue-cli生成，然后配置一堆参数。当一个配置的参数有变，所有的其他项目都需要联动调整，维护量较大。
项目的编码维护
每个项目，所属的业务不同。但是整体上应当： 系统UI一致、部分相同业务逻辑代码处理一致。重复coding很多，维护量也很大。当编码不受控时，各个项目的处理方式也可能各不相同。
iframe性能问题
iframe在使用中，问题不少。
- iframe相当于一个完整的页面，内存cpu占用是一个问题；
- iframe和主页面共享同一个连接池，可能会和主页面相互影响；
- iframe不同平台(PC和移动等)、不同浏览器(Chrome和IE等)效果有差异，适配也是难点；
- iframe和主页面需要考虑跨域的问题；
- 等等等…
所以很多地方建议前端尽可能少用iframe。
解决方法
对于各种发现的问题，简单构想一下可以整合前台项目，通过Webpack按项目打包生成多个SPA。
项目配置
之前在一篇文章Webpack2中多页应用的实现中写到了项目最终打包生成多页的配置文件，但是开发模式上一直没能解决完整启动多页的功能。
这次研究了一下webpackDevServer，终于找到了可行的解决方法。
项目配置思路
在Webpack中，入口js是配置项的entry，最终的html生成是plugin中HtmlWebpackPlugin插件实现。
实际使用中，就是找到各个页面入口js和入口html，加入配置就行。
配置Demo
下面是一个比较简单的多页HTML Demo配置
const entry = {
page1: './src/page1.js',
page2: './src/page2.js',
}
const htmlPlugins = [
new HtmlWebpackPlugin({
template: './src/page1.html',
filename: 'page1.html',
inject: true,
chunks: 'all',
excludeChunks: ['page2'],
chunksSortMode: 'dependency',
}),
new HtmlWebpackPlugin({
template: './src/page2.html',
filename: 'page2.html',
inject: true,
chunks: 'all',
excludeChunks: ['page1'],
chunksSortMode: 'dependency',
})];ok，按照这个配置，生产编译问题解决了。
但是开发环境呢。。。
开发环境配置
之前公司项目中也用到了多页配置，加上了HtmlWebpackPlugin实现了，但是每次只能启动一个单页。虽然两个模板关系不是特别紧密，但是如果能一次直接启动全部肯定是更好的。
正好最近在给自己的项目模板做 Webpack 4 升级的过程中也遇到了这个问题，所以自己翻查了下webpackDevServer的文档说明，找到了解决方案devServer.historyApiFallback。
参照文档描述，只需要自己指定路由重写机制，就可以实现开发模式多页面注入并导航。
那上面的demo，配置类似如下写法就可以满足需求。
historyApiFallback: {
rewrites: [
{ from: /^\/$/, to: '/page1.html' },
{ from: /^\/page1/, to: '/page1.html' },
{ from: /^\/page2/, to: '/page2.html' }
]
}一个现成的项目例子
多页的开发生产配置项目，已经上传了suyi91/simple-frontend-template 源代码为1.2.0版本