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í)依賴的一個(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è)面

/* 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 的

// 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 的

/* vue.config.js */

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

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