自动加载路由-webpack require.context

vue项目中，每添加一个模块都需要去引入并注册到路由表中，webpack中的require.context这个API将会解决这个问题，大大提升了我们的工作效率。

不妨去看看我们的路由表，三四个模块就需要200行以上的代码量，而且我增加一个模块就需要再次注册一遍，冗余的代码太多太多了。

首先，我们来看看require.context是什么？？？

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

怎么用呢？？？

require.context接收三个参数，分别为路径、是否遍历子目录、查找正则

1. directory {String} -读取文件的路径

2. useSubdirectories {Boolean} -是否遍历文件的子目录

3. regExp {RegExp} -匹配文件的正则

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);

接下来我们看一下APi给我们返回了什么？

 

1. resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
2. id {String} -匹配的文件夹的相对于工程的相对路径,是否遍历子目录,匹配正则组成的字符串,应该是热加载用到
3. keys {Function} -返回匹配成功模块的名字组成的数组（我们需要的）

最后，把他放到我们的项目中去运行起来

import Vue from 'vue'
import Router from 'vue-router'

let routes = []

// // require.context(directory, useSubdirectories = false, regExp = /^.//); 路径+是否遍历子目录+匹配正则

const routeFiles = require.context('@/views', true, /\.vue/) // 读取views文件夹下面所有的.vue文件
console.dir(routeFiles)
routeFiles.keys().forEach(item => {
  // console.log(item)
  if (item.indexOf('component') === -1) { // component下面为子组件不需要注册路由
    let info = item.split('.')
    // console.log(info)
    routes.push({
      path: info[1],
      component: routeFiles(item).default
    })
    // console.log(exArr)
  }
})

// console.dir(routes)
Vue.use(Router)

export default new Router({
  routes
})

 至此，项目中新增模块就可以实现自动加载了。。。