# 一、概念
首先我们可以把多页应用理解为由多个单页构成的应用，而何谓多个单页呢？其实你可以把一个单页看成是一个
html文件，那么多个单页便是多个html文件，多页应用便是由多个html组成的应用，如下图所示
既然多页应用拥有多个
html，那么同样其应该拥有多个独立的入口文件、组件、路由、vuex等。没错，说简单一点就是多页应用的每个单页都可以拥有单页应用src目录下的文件及功能，我们来看一下一个基础多页应用的目录结构
├── node_modules # 项目依赖包目录
├── build # 项目 webpack 功能目录
├── config # 项目配置项文件夹
├── src # 前端资源目录
│ ├── images # 图片目录
│ ├── components # 公共组件目录
│ ├── pages # 页面目录
│ │ ├── page1 # page1 目录
│ │ │ ├── components # page1 组件目录
│ │ │ ├── router # page1 路由目录
│ │ │ ├── views # page1 页面目录
│ │ │ ├── page1.html # page1 html 模板
│ │ │ ├── page1.vue # page1 vue 配置文件
│ │ │ └── page1.js # page1 入口文件
│ │ ├── page2 # page2 目录
│ │ └── index # index 目录
│ ├── common # 公共方法目录
│ └── store # 状态管理 store 目录
├── .gitignore # git 忽略文件
├── .env # 全局环境配置文件
├── .env.dev # 开发环境配置文件
├── .postcssrc.js # postcss 配置文件
├── babel.config.js # babel 配置文件
├── package.json # 包管理文件
├── vue.config.js # CLI 配置文件
└── yarn.lock # yarn 依赖信息文件
@前端进阶之旅: 代码已经复制到剪贴板
# 二、多入口
在单页应用中，我们的入口文件只有一个，
CLI默认配置的是main.js，但是到了多页应用，我们的入口文件便包含了page1.js、page2.js、index.js等，数量取决于pages文件夹下目录的个数，这时候为了项目的可拓展性，我们需要自动计算入口文件的数量并解析路径配置到webpack中的entry属性上，如：
module.exports = {
...
entry: {
page1: '/xxx/pages/page1/page1.js',
page2: '/xxx/pages/page2/page2.js',
index: '/xxx/pages/index/index.js',
},
...
}
@前端进阶之旅: 代码已经复制到剪贴板
那么我们如何读取并解析这样的路径呢，这里就需要使用工具和函数来解决了。我们可以在根目录新建
build文件夹存放utils.js这样共用的webpack功能性文件，并加入多入口读取解析方法
