Vue CLI3基礎學習之pages構建多頁應用

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 安裝時依賴的一個第三方模塊，該模塊允許你使用 * 等符號,
// 例如 lib/*.js 就是獲取 lib 文件夾下的所有 js 后綴名的文件
const glob = require('glob');

// 取得相應的頁面路徑，因為之前的配置，所以是 src 文件夾下的 pages 文件夾
const PAGE_PATH = path.resolve(__dirname, '../src/pages');

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

// 多頁面輸出配置
// 與上面的多頁面入口配置相同，讀取 page 文件夾下的對應的 html 后綴文件，然后放入數組中
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,
  }
  
  // 如果有自定義配置可以進行 merge
  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 元素中屬性的引號
    },
    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 一個對象會通過 webpack-merge 進行合并，plugins 不會置空
  return {
   plugins: [...utils.htmlPlugin()]
  }
 },
 
 ...
}

/* vue.config.js */
module.exports = {
 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'
 }
}

// 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, 
   // 模板來源
   template: tmp + '.html', 
   // 在 dist/index.html 的輸出
   filename: filename + '.html', 
   // 頁面模板需要加對應的js腳本，如果不加這行則每個頁面都會引入所有的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 元素中屬性的引號
    },
    chunksSortMode: 'manual'// 按 manual 的順序引入
   })
  }

  map[filename] = conf
 })

 return map
}

/* vue.config.js */

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

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