webpack 自动导入功能 require.context

require.context

生成一个 context module(上下文模块)。

require.context(path: string, needChildren: boolean, match: RegExP);

参数说明

• path: 需要引入模块文件夹；
• needChildren: 是否需要子目录；
• match: 匹配正则。

例子

有以下目录以文件

└─src
    │  index.js
    │
    └─modules
            login.js
            logout.js
            user.js

index.js 文件代码

let ctx = require.context('./modules', false, /.js$/);
console.log('ctx :>> ', ctx);
console.log('ctx :>> ', Object.keys(ctx));

ctx 是一个函数，并且还有3个挂载的属性，我们分别打印看看。

console.log('keys :>> ', ctx.keys);
console.log('resolve :>> ', ctx.resolve);
console.log('id :>> ', ctx.id);

keys 和 resolve 都是函数，id 则是我们运行 require.context 传入的参数。而 keys 的运行结果就是我们需要的模块路径集合，需要在 ctx 传入参数以获取模块
打印 keys 函数运行结果

console.log('keys :>> ', ctx.keys());

打印 ctx 函数运行结果

ctx.keys().forEach(path => console.log('modules :>> ', ctx(path)));

现在就成功引入所有模块，可以根据自己的实际的业务情况自行取用。