详解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-common', '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-common', 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' "htmlcode">

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


hasDedicatedTemplate 是判断

用户传递的多页配置自定义模板路径是否存在：





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


templatePath 的处理细节：
htmlPath 路径是：

/Users/*/public/index.html





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


defaultHtmlPath 路径是：

/Users/*/node_modules/@vue/cli-service/lib/config/index-default.html





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


如果：
1、用户自定义的模板存在就直接给 templatePath

2、如果不存在，先取 public/index.html，再不行就取 node_modules 里面的


const templatePath = hasDedicatedTemplate
   "htmlcode">

const outputDir = api.resolve(options.outputDir)



2、生成 webpack config 关于 html-webpack-plugin 的部分：


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



pageHtmlOptions 的处理细节：
传递给 html-webpack-plugin 插件的参数，这里默认会设置 chunks 的，所以上面实战中配置也是无用功


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



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。