目前的方式
目前单页应用多个项目基于同一套 webpack 配置，那就需要去设置各自项目的 entry，才能分开调试和打包。webpack 的 entry 是它的四大核心之一，支持也比较灵活，可以是字符串、数组、对象。我们项目选择的是对象方式。 已现有项目为例，找医生、积分商城、生长曲线都属于独立的单页应用，他们基于同一套 webpack 配置，对应的项目结构为：
|—— vue-projects
|———— webpack
|———— findDoctor
...
|———— index.html
|———— main.js
|———— scoreMall
...
|———— index.html
|———— main.js
|———— growthCurve
...
|———— index.html
|———— main.js
这就是大致的项目结构。webpack 是按入口进行打包，所以每个项目应该有各自的入口文件。如果有使用过脚手架 vue-cli 去生成项目应该会知道每个项目根目录下面都会有一个 main.js 作为入口。那配置 webpack entry 可以配置为:
entry: {
findDoctor: '../findDoctor/main.js',
scoreMall: '../scoreMall/main.js',
growthCurve: '../growthCurve/main.js'
}
这是入口的配置，在本地开发调试时，我们调试哪个项目就需要访问到哪个项目的 index.html 文件。但默认的 webpack 配置会将所有的 js 插入同一个 index.html 文件。
// index.html
<head>
...
</head>
<body>
<div id="app"></div>
<script src="/findDortor.js"></script>
<script src="/scoreMall.js"></script>
<script src="/growthCurve.js"></script>
</body>
这样会导致没法调试。所以实际我们需要的是，不同的项目能有各自的 index.html，而且各自的 html 只包含自己的 js 文件。 那可以再加一层 server 用来按路径去返回各自的 index.html。这个 index.html 本身就存放于各自项目的根目录下面。这层 server 也是基于 express 框架来做的。
const routers = [{
path: '/gc*', // 生长曲线
file: 'growthCurve/index'
},{
path: '/sm', // 积分商城
file: 'scoreMall/index'
}{
path: '/fd*', // 找医生
file: 'findDoctor/index'
}];
routers.forEach(item => {
const filePath = `${path.dirname(__dirname)}/projects/${item.file}`;
console.log(filePath);
app.get(item.path, (req, res) => {
res.sendFile(`${filePath}.html`);
});
});
那通过这样的配置，我们调试时就可以 通过访问不同的 html 分别调试不同的项目。
localhost:3006/fd ——> 找医生
localhost:3006/sm ——> 积分商城
localhost:3006/gc ——> 生长曲线
存在的问题
以前这种方式其实最大的问题就是 扩展性差，不够灵活，每次新建项目都需要去配置入口，配置访问 index.html 的路由。而且在路由的名称也没有太大的规范，一般都是利用项目名称简写。比如 /fd 代表了找医生，积分商城是 /sm