require.context实现前端自动化导入文件

当你需要从一个文件夹内导入多个模块，挨个逐一配置劳神费力，此时可以用require.context来实现自动化导入，也就是我们常说的前端工程自动化。

先来看一个例子

const context = require.context('./file', false, /\.js$/);  //导入file文件下所有的js文件

require.context('../', true, /\.stories\.js$/); //官网样例

详细解读：

一个webpack的api,通过执行require.context()创建自己的上下文

require.context接收三个参数

require.context(directory, useSubdirectories, regExp);

第一个：文件目录directory {String}

第二个：是否遍历该文件的子目录useSubdirectories {Boolean}

第三个：匹配导入文件的正则regExp {RegExp}

=========

require.context执行后返回一个函数，有三个属性 即 resolve，keys, id

1. resolve {Function} 接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径

2. keys {Function} -返回匹配成功模块的数组

3. id {String} -执行环境上下文模块的模块id

附上webpack官网对于require.context的介绍https://webpack.js.org/guides/dependency-management/#requirecontext