项目庞大之后，各模块相对独立，经常需要import或者export各种模块，导入导出相当频繁，那我们可以利用webpack的require模块来实现自动读取导入。

require.context(directory, useSubdirectories, regExp)

require.context接收三个参数

• 要搜索的文件夹目录
• 是否还应该搜索它的子目录，
• 一个匹配文件的正则表达式。

生成路由

文件夹现状

|-- route  
| |-- a.route.js  
| |-- b.route.js  
| |-- c.route.js  
| |-- d.route.js  
|
....
...

route文件现状

import Vue from 'vue'
import Router from 'vue-router'
import a from './a.route.js'
import b from './a.route.js'
import c from './a.route.js'
import d from './a.route.js'

Vue.use(Router)

export default new Router({
  routes: [
    ...a, 
    ...b, 
    ...c, 
    ...d, 
  ]
})

项目中每次新增页面，都会重复将路由router配置加入到index的操作，我们可以将所有router.js匹配处理。

使用require.context读取目标目录下文件，并匹配出路由配置文件（我们约定的路由文件是以.routes.js结尾）

import Router from 'vue-router';

Vue.use(Router);
const files = require.context('./', true, /\.routes.js$/);
// 导出的key是export default，所有这里是default
let routers = files.keys().map(k => files(k).default); 
let list = [];
routers.forEach(r => list.push(...r));
const router = new Router({
  routes: list.map(route => {
  	// 项目中指定路由前缀，没有需要可不做处理
	// route.path = `/${constant.URL_PREFIX}/${route.path}`; 
	  return route;
    })
});
export default router;

注册全局组件

全局组件越来愈多，每次复制粘贴自然不够优雅，我们同样可以使用require自动引入

// false 不遍历子目录，true遍历子目录
const components = require.context('./components', false, /\.vue$/);   
let comps = components.keys().map(k => files(k).default); 
comps.forEach(c=>{
  Vue.component(`com-${c.name}`, c);
})