require.context实现模块导入的自动化

require.context能干什么

require.context是webpack的一个api,主要用来遍历文件夹中的指定文件,然后自动导入,使得不必每次有新增模块都显式的调用import来导入模块。

require.context参数

接受三个参数：require.context(directory,useSubdirectories,regExp)

1、directory：要读取文件的路径

2、useSubdirectories：是否遍历子目录

3、regExp：匹配文件的正则

划重点：参数不能是变量。

require.context返回一个函数

const files = require.context('.', false, /\.js$/) 执行后返回一个函数，函数有三个属性。

1、keys {Function}：返回匹配通过的所有文件的相对（directory参数）路径组成的数组。

2、resolve {Function}：传入keys返回的list中的值，返回这个文件相对整个工程的路径。

3、id {String}：模块id（相对于工程的相对路径、是否遍历子目录、匹配正则组成的字符串）。

通过files (files.keys()[0])这种方式拿到导入文件内容

项目使用

用require.context实现路由模块自动导入

const files = require.context('.', true, /^((?!\/extPage|\/pcPage).)*\.js$/)
let routers = []
files.keys().forEach(item => {
   routers = routers.concat(files(item).default || [])
})

　const router = new Router({

　　// mode: "history", //路由模式

  　routes: routers

　});

- 这里使用正则排除了某些模块。由于参数不能为变量（遍历发生在编译阶段），正则不能通过定义变量生成，特殊情况需要增加排除模块时只能手动修改正则。

- 负面影响：即使排除了部分模块，在编译阶段，依然会把发现的所有模块都打包（如使用路由懒加载，可以明显看到排除了的模块依然会被打包出来）。