npm install vue-cli -g
vue init webpack multiple-vue-amazing

npm install glob --save-dev

/* 這里是添加的部分 ---------------------------- 開始 */
// glob是webpack安裝時(shí)依賴的一個(gè)第三方模塊，還模塊允許你使用 *等符號, 例如lib/*.js就是獲取lib文件夾下的所有js后綴名的文件
var glob = require('glob')
// 頁面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相應(yīng)的頁面路徑，因?yàn)橹暗呐渲?，所以是src文件夾下的pages文件夾
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
// 用于做相應(yīng)的merge處理
var merge = require('webpack-merge')
//多入口配置
// 通過glob模塊讀取pages文件夾下的所有對應(yīng)文件夾下的js后綴文件，如果該文件存在
// 那么就作為入口處理
exports.entries = function () {
 var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
 var map = {}
 entryFiles.forEach((filePath) => {
  var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
  map[filename] = filePath
 })
 return map
}
//多頁面輸出配置
// 與上面的多頁面入口配置相同，讀取pages文件夾下的對應(yīng)的html后綴文件，然后放入數(shù)組中
exports.htmlPlugin = function () {
 let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
 let arr = []
 entryHtml.forEach((filePath) => {
  let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
  let conf = {
   // 模板來源
   template: filePath,
   // 文件名稱
   filename: filename + '.html',
   // 頁面模板需要加對應(yīng)的js腳本，如果不加這行則每個(gè)頁面都會引入所有的js腳本
   chunks: ['manifest', 'vendor', filename],
   inject: true
  }
  if (process.env.NODE_ENV === 'production') {
   conf = merge(conf, {
    minify: {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
   })
  }
  arr.push(new HtmlWebpackPlugin(conf))
 })
 return arr
}
/* 這里是添加的部分 ---------------------------- 結(jié)束 */
webpack.base.conf.js 文件
/* 修改部分 ---------------- 開始 */
 entry: utils.entries(),
 /* 修改部分 ---------------- 結(jié)束 */
webpack.dev.conf.js 文件
/* 注釋這個(gè)區(qū)域的文件 ------------- 開始 */
 // new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // }),
 /* 注釋這個(gè)區(qū)域的文件 ------------- 結(jié)束 */
 new FriendlyErrorsPlugin()
 /* 添加 .concat(utils.htmlPlugin()) ------------------ */
 ].concat(utils.htmlPlugin())
webpack.prod.conf.js 文件
/* 注釋這個(gè)區(qū)域的內(nèi)容 ---------------------- 開始 */
 // new HtmlWebpackPlugin({
 // filename: config.build.index,
 // template: 'index.html',
 // inject: true,
 // minify: {
 //  removeComments: true,
 //  collapseWhitespace: true,
 //  removeAttributeQuotes: true
 //  // more options:
 //  // https://github.com/kangax/html-minifier#options-quick-reference
 // },
 // // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 // chunksSortMode: 'dependency'
 // }),
 /* 注釋這個(gè)區(qū)域的內(nèi)容 ---------------------- 結(jié)束 */
 // copy custom static assets
 new CopyWebpackPlugin([
  {
  from: path.resolve(__dirname, '../static'),
  to: config.build.assetsSubDirectory,
  ignore: ['.*']
  }
 ])
 /* 該位置添加 .concat(utils.htmlPlugin()) ------------------- */
 ].concat(utils.htmlPlugin())

npm install element-ui bootstrap-vue --save

import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

npm run build --report

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor-admin',
  chunks: ['vendor'],
  minChunks: function (module, count) {
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 &&
   module.resource.indexOf('element-ui') != -1
  )
  }
 }),
 new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor-index',
  chunks: ['vendor'],
  minChunks: function (module, count) {
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 &&
   module.resource.indexOf('bootstrap-vue') != -1
  )
  }
 }),

chunksSortMode: function (chunk1, chunk2) {
   var order1 = chunks.indexOf(chunk1.names[0])
   var order2 = chunks.indexOf(chunk2.names[0])
   return order1 - order2
  },