详解Vue CLI3 多页应用实践和源码设计

pages: {
 index: {
  // page 的入口
  entry: 'src/index/main.js',
  // 模板来源
  template: 'public/index.html',
  // 在 dist/index.html 的输出
  filename: 'index.html',
  // 当使用 title 选项时，
  // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  title: 'Index Page',
  // 在这个页面中包含的块，默认情况下会包含
  // 提取出来的通用 chunk 和 vendor chunk。
  chunks: ['chunk-vendors', 'chunk-mon', 'index']
 },
 // 当使用只有入口的字符串格式时，
 // 模板会被推导为 `public/subpage.html`
 // 并且如果找不到的话，就回退到 `public/index.html`。
 // 输出文件名会被推导为 `subpage.html`。
 subpage: 'src/subpage/main.js'
 }

src
 pages
 page1
  index.html
  main.js
  App.vue
 page2
  index.html
  main.js
  App.vue 

const glob = require('glob')

const path = require('path')
const PAGES_PATH = path.resolve(__dirname, './src/pages')

const pages = {}

glob.sync(PAGES_PATH + '//main.js').forEach(filepath => {
 // ...
})

const pageName = path.basename(path.dirname(filepath))

pages[pageName] = {
 entry: filepath,
 filename: `${pageName}.html`,
 chunks: ['chunk-vendors', 'chunk-mon', pageName]
 }

const templatePath = path.dirname(filepath) + '/index.html'

if (!fs.existsSync(templatePath)) {
 // 入口如果不配置直接使用
 templatePath = 'public/index.html'
 }

const multiPageConfig = options.pages

webpackConfig.entryPoints.clear()

const pages = Object.keys(multiPageConfig)
pages.forEach(name => {
})

const {
   title,
   entry,
   template = `public/${name}.html`,
   filename = `${name}.html`,
   chunks
  } = normalizePageConfig(multiPageConfig[name])

const normalizePageConfig = c => typeof c === 'string' ? { entry: c } : c

webpackConfig.entry(name).add(api.resolve(entry))

const fs = require('fs')
const hasDedicatedTemplate = fs.existsSync(api.resolve(template))

const htmlPath = api.resolve('public/index.html')

const defaultHtmlPath = path.resolve(__dirname, 'index-default.html')

const templatePath = hasDedicatedTemplate
   ? template
   : fs.existsSync(htmlPath)
   ? htmlPath
   : defaultHtmlPath

const outputDir = api.resolve(options.outputDir)

const HTMLPlugin = require('html-webpack-plugin')
webpackConfig
   .plugin(`html-${name}`)
   .use(HTMLPlugin, [pageHtmlOptions])

const pageHtmlOptions = Object.assign({}, htmlOptions, {
   chunks: chunks || ['chunk-vendors', 'chunk-mon', name],
   template: templatePath,
   filename: ensureRelative(outputDir, filename),
   title
  })