背景

当我们基于vue开发单个项目时，我们会init一个vue-cli，但当我们想在其他项目里共用这套模板时，就需要重新init一个，或者clone过来，这非常不方便，而且当多人开发时，我们希望所有的开发代码都在一个git目录下，这时就有了对webpack进行配置的需求，当有些页面需要多入口时，我们又产生了对多入口配置的需求，这里提供一种配置方案，希望能帮助到有需要的人，废话不多说，我们开始吧！

先初始化一个项目

我们通过vue init webpack demo 生成的文件目录是这样的

修改项目入口

要改多入口，首先改造一下webpack.base.conf.js中的context和entry。

context：基础目录，绝对路径，用于从配置中解析入口起点(entry point)和 loader。

entry：起点或是应用程序的起点入口。从这个起点开始，应用程序启动执行。

module.exports = {   context: path.resolve(__dirname, '../'),   entry: {     app: './src/main.js'   }, };

如果项目只有一个入口，那么直接在这里改entry就可以了，但一般我们都是多个项目在放一个目录里，所以要提取出来context和entry。

const paths = require('./paths') const rootPath = paths.rootPath module.exports = {   context: rootPath   entry: {     app: utils.getEntry(),   },  };

在config里新建_config.js和paths.js

_config.js，用于设置当前启动项目，并将这个文件添加到.gitignore中，因为以后多人开发都是在本地修改项目地址。

 'use strict'  module.exports = {   appName: 'mobile',   projectName: 'demo' }

这里设计2个目录，appName是src下的一级目录，projectName是appName下的二级目录，目的在于方便拓展，比如公司的项目分为pc项目和mobile项目，开发时便于区分，如果你的项目比较少，那可以把appName写成一个固定字符串如：pages，每次切换项目只更改projectName就可以了。我们将所有项目放在src下，类似目录如下

├─mobile │  ├─demo │  └─demo2 └─pc     ├─demo     └─demo2

paths.js，用于配置一些全局需要用到的路径

'use strict' const path = require('path') const fs = require('fs') const _config = require('./_config')  const rootPath = fs.realpathSync(process.cwd()) // 项目根目录 fs.realpathSync表示获取真实路径 const resolve = relativePath => path.resolve(rootPath, relativePath) // 自定义一个resolve函数，拼接出需要的路径地址 module.exports = {   rootPath, // 项目根目录   commonPath: resolve('common'), // 公共目录<