当你需要从一个文件夹内导入多个模块,挨个逐一配置劳神费力,此时可以用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
-
resolve {Function} 接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
-
keys {Function} -返回匹配成功模块的数组
-
id {String} -执行环境上下文模块的模块id
附上webpack官网对于require.context的介绍https://webpack.js.org/guides/dependency-management/#requirecontext