Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁(yè)應(yīng)用

module.exports = {
 ...
 
 entry: {
  page1: '/xxx/pages/page1/page1.js',
  page2: '/xxx/pages/page2/page2.js',
  index: '/xxx/pages/index/index.js',
 },
 
 ...
}

/* utils.js */
const path = require('path');

// glob 是 webpack 安裝時(shí)依賴(lài)的一個(gè)第三方模塊，該模塊允許你使用 * 等符號(hào),
// 例如 lib/*.js 就是獲取 lib 文件夾下的所有 js 后綴名的文件
const glob = require('glob');

// 取得相應(yīng)的頁(yè)面路徑，因?yàn)橹暗呐渲?，所以?src 文件夾下的 pages 文件夾
const PAGE_PATH = path.resolve(__dirname, '../src/pages');

/* 
* 多入口配置
* 通過(guò) glob 模塊讀取 pages 文件夾下的所有對(duì)應(yīng)文件夾下的 js * 后綴文件，如果該文件存在
* 那么就作為入口處理
*/
exports.getEntries = () => {
 let entryFiles = glob.sync(PAGE_PATH + '/*/*.js') // 同步讀取所有入口文件
 let map = {}
 
 // 遍歷所有入口文件
 entryFiles.forEach(filePath => {
  // 獲取文件名
  let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
  
  // 以鍵值對(duì)的形式存儲(chǔ)
  map[filename] = filePath 
 })
 
 return map
}

/* vue.config.js */

const utils = require('./build/utils')

module.exports = {
 ...
 
 configureWebpack: config => {
  config.entry = utils.getEntries()
 },
 
 ...
}

/* webpack 配置文件 */
const HtmlWebpackPlugin = require('html-webpack-plugin') // 安裝并引用插件

module.exports = {
 ...
 
 plugins: [
  new HtmlWebpackPlugin({
   title: 'My Page', // 生成 html 中的 title
   filename: 'demo.html', // 生成 html 的文件名
   template: 'xxx/xxx/demo.html', // 模板路徑
   chunks: ['manifest', 'vendor', 'demo'], // 所要包含的模塊
   inject: true, // 是否注入資源
  })
 ]
 
 ...
}

/* utils.js */

// 多頁(yè)面輸出配置
// 與上面的多頁(yè)面入口配置相同，讀取 page 文件夾下的對(duì)應(yīng)的 html 后綴文件，然后放入數(shù)組中
exports.htmlPlugin = configs => {
 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', // 生成 html 的文件名
   chunks: ['manifest', 'vendor', filename],
   inject: true,
  }
  
  // 如果有自定義配置可以進(jìn)行 merge
  if (configs) {
   conf = merge(conf, configs)
  }
  
  // 針對(duì)生產(chǎn)環(huán)境配置
  if (process.env.NODE_ENV === 'production') {
   conf = merge(conf, {
    minify: {
     removeComments: true, // 刪除 html 中的注釋代碼
     collapseWhitespace: true, // 刪除 html 中的空白符
     // removeAttributeQuotes: true // 刪除 html 元素中屬性的引號(hào)
    },
    chunksSortMode: 'manual' // 按 manual 的順序引入
   })
  }
  
  arr.push(new HtmlWebpackPlugin(conf))
 })
 
 return arr
}

/* vue.config.js */

const utils = require('./build/utils')

module.exports = {
 ...
 
 configureWebpack: config => {
  config.entry = utils.getEntries() // 直接覆蓋 entry 配置
  
  // 使用 return 一個(gè)對(duì)象會(huì)通過(guò) webpack-merge 進(jìn)行合并，plugins 不會(huì)置空
  return {
   plugins: [...utils.htmlPlugin()]
  }
 },
 
 ...
}

/* vue.config.js */
module.exports = {
 pages: {
  index: {
   // page 的入口
   entry: 'src/index/main.js',
   // 模板來(lái)源
   template: 'public/index.html',
   // 在 dist/index.html 的輸出
   filename: 'index.html',
   // 當(dāng)使用 title 選項(xiàng)時(shí)，
   // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
   title: 'Index Page',
   // 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含
   // 提取出來(lái)的通用 chunk 和 vendor chunk。
   chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  // 當(dāng)使用只有入口的字符串格式時(shí)，
  // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
  // 并且如果找不到的話(huà)，就回退到 `public/index.html`。
  // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
  subpage: 'src/subpage/main.js'
 }
}

// pages 多入口配置
exports.setPages = configs => {
 let entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
 let map = {}

 entryFiles.forEach(filePath => {
  let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
  let tmp = filePath.substring(0, filePath.lastIndexOf('\/'))

  let conf = {
   // page 的入口
   entry: filePath, 
   // 模板來(lái)源
   template: tmp + '.html', 
   // 在 dist/index.html 的輸出
   filename: filename + '.html', 
   // 頁(yè)面模板需要加對(duì)應(yīng)的js腳本，如果不加這行則每個(gè)頁(yè)面都會(huì)引入所有的js腳本
   chunks: ['manifest', 'vendor', filename], 
   inject: true,
  };

  if (configs) {
   conf = merge(conf, configs)
  }

  if (process.env.NODE_ENV === 'production') {
   conf = merge(conf, {
    minify: {
     removeComments: true, // 刪除 html 中的注釋代碼
     collapseWhitespace: true, // 刪除 html 中的空白符
     // removeAttributeQuotes: true // 刪除 html 元素中屬性的引號(hào)
    },
    chunksSortMode: 'manual'// 按 manual 的順序引入
   })
  }

  map[filename] = conf
 })

 return map
}

/* vue.config.js */

const utils = require('./build/utils')

module.exports = {
 ...
 
 pages: utils.setPages(),
 
 ...
}