因实际需要，在公司移动端项目上线后机组做pc版，此时，如果重新构建一个pc项目的话一来维护不便，二来很多公共资源可以重复利用，因此在原来移动端的基础上构建多入口，实现一个项目两个版本，甚至多个

一、目录结构分析

配置多入口其实就是将pc版和手机版共用一个cli，在src目录下创建一个entries目录，里面分别创建pc、mobile目录存放分别的入口文件，接下来，将index.html、main.js、App.vue移动到pc目录并改名，手机端复制pc改名

原目录结构

1├── README.md            项目介绍
2├── index.html           入口页面
3├── build              构建脚本目录
4│  ├── build-server.js         运行本地构建服务器，可以访问构建后的页面
5│  ├── build.js            生产环境构建脚本
6│  ├── dev-client.js          开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
7│  ├── dev-server.js          运行本地开发服务器
8│  ├── utils.js            构建相关工具方法
9│  ├── webpack.base.conf.js      wabpack基础配置
10│  ├── webpack.dev.conf.js       wabpack开发环境配置
11│  └── webpack.prod.conf.js      wabpack生产环境配置
12├── config             项目配置
13│  ├── dev.env.js           开发环境变量
14│  ├── index.js            项目配置文件
15│  ├── prod.env.js           生产环境变量
16│  └── test.env.js           测试环境变量
17├── package.json          npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
18├── src               源码目录  
19│  ├── main.js             入口js文件
20│  ├── app.vue             根组件
21│  ├── components           公共组件目录
22│  ├── assets             资源目录，这里的资源会被wabpack构建
23│  │  └── images
24│  │    └── logo.png
25│  ├── routes             前端路由
26│  │  └── index.js
27├── static             纯静态资源，不会被wabpack构建。
28└── test              测试文件目录（unit&e2e）
29  └── unit              单元测试

配置多入口目录

1├── src
2│  ├── entries        新的入口目录
3│  │    │── pc            pc版入口文目录
4│  │	│  ├──pc.js          pc版入口js(以前的main.js)
5│  │	│  ├──pc.vue         pc版入口vue(以前的App.vue)
6│  │	│  └──pc.html        pc版入口html(以前的index.html)		
7│  │    └── mobile        手机版入口文目录
8│  │	   ├──mobile.js      手机版入口js(以前的main.js)
9│  │	   ├──mobile.vue     手机版入口vue(以前的App.vue)
10│  │	   └──mobile.html    手机版入口vue(以前的App.vue)
11│  └─── router             
12│     ├──mobile.js     手机版路由
13│     └──pc.js 		   pc版路由
14

二、入口文件修改

以pc.vue为例，mobile同理

1import Vue from 'vue'
2import Pc from './pc.vue'
3import router from '../.././router/pc.js'
4new Vue({
5  el: '#app',
6  router,
7  components: { Pc },
8  template: '<Pc/>'
9})
10

三、修改utils配置文件

打开/build/utils.js加入如下内容

1var glob = require('glob')
2// 页面模板
3var HtmlWebpackPlugin = require('html-webpack-plugin')
4// 取得相应的页面路径，因为之前的配置，所以是src文件夹下的entries文件夹
5var PAGE_PATH = path.resolve(__dirname, '../src/entries')
6    // 用于做相应的merge处理
7var merge = require('webpack-merge')
8
9//多入口配置
10// 通过glob模块读取page文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
11// 那么就作为入口处理
12exports.entries = function() {
13    var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')  // 寻找入口js（原main.js）
14    var map = {}
15    entryFiles.forEach((filePath) => {
16        var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
17        map[filename] = filePath
18    })
19    return map
20}
21//多页面输出配置
22// 与上面的多页面入口配置相同，读取page文件夹下的对应的html后缀文件，然后放入数组中
23exports.htmlPlugin = function() {
24	let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
25	let arr = []
26	entryHtml.forEach((filePath) => {
27	    let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
28	    let conf = {
29	        // 模板来源
30	        template: filePath,
31	        // 文件名称
32	        filename: filename + '.html',
33	        // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
34	        chunks: ['manifest', 'vendor', filename],
35	        inject: true
36	    }
37	    if (process.env.NODE_ENV === 'production') {
38	        conf = merge(conf, {
39	            minify: {
40	                removeComments: true,
41	                collapseWhitespace: true,
42	                removeAttributeQuotes: true
43	            },
44	            chunksSortMode: 'dependency'
45	        })
46	    }
47	    arr.push(new HtmlWebpackPlugin(conf))
48	})
49	return arr
50}

四、修改webpack.dev.conf

打开/build/webpack.dev.conf.js做如下修改：

1. 找到 plugins:数组，将如下内容注释或删除

1 new HtmlWebpackPlugin({
2   filename: 'index.html',
3   template: 'index.html',
4   inject: true
5 }),

2. 在plugins数组上拼接上在utils.js内获取到的入口内容 修改完成以后的plugins如下：

1
2plugins: [
3    new webpack.DefinePlugin({
4      'process.env': require('../config/dev.env')
5    }),
6    new webpack.HotModuleReplacementPlugin(),
7    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
8    new webpack.NoEmitOnErrorsPlugin(),
9    // https://github.com/ampedandwired/html-webpack-plugin
10    // 注释开始
11    // new HtmlWebpackPlugin({
12    //   filename: 'index.html',
13    //   template: 'index.html',
14    //   inject: true
15    // }),
16    // 注释结束
17    // copy custom static assets
18    new CopyWebpackPlugin([
19      {
20        from: path.resolve(__dirname, '../static'),
21        to: config.dev.assetsSubDirectory,
22        ignore: ['.*']
23      }
24    ])
25  ].concat(utils.htmlPlugin())  // 这里是添加的部分

修改webpack.prod.conf

打开/build/webpack.prod.conf做如下修改：

1. 找到 plugins:数组，将如下内容注释或删除

1 new HtmlWebpackPlugin({
2   filename: process.env.NODE_ENV === 'testing'
3     ? 'index.html'
4     : config.build.index,
5   template: 'index.html',
6   inject: true,
7   minify: {
8     removeComments: true,
9     collapseWhitespace: true,
10     removeAttributeQuotes: false
11     // more options:
12     // https://github.com/kangax/html-minifier#options-quick-reference
13   },
14   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
15   chunksSortMode: 'dependency'
16 }),

2. 在plugins数组上拼接上在utils.js内获取到的入口内容 (操作同上一步)

五、添加客户端判断

客户端访问项目时，通过js判断展示哪个版本 在pc版本入口pc.html文件内添加如下js

1if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
2	window.location.href = '/mobile.html#/'
3}

同理，在mobile.html添加如下js

1if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
2	window.location.href = '/pc.html#/'
3}

六、后续说明

以上步骤操作完成以后便成功的添加了多入口，但是有几点需要注意：

1. 本地运行调试的时候，以前我们是localhost:8080就可以访问了，但是现在我们需要 localhost:8080/pc.html或者localhost:8080/mobile.html
2. 项目通过webpack打包以后会在根目录生成mobile.html和pc.html,在项目部署的时候需要配置默首页，也就是指定是mobile.html或者pc.html