webpack中的require.context用法

1.require.context(directory,useSubdirectories,regExp) 函数接收三个参数：

directory:表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名

比如：

require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。
require.context('../', true, /\.stories\.js$/);
// （创建出）一个 context，其中所有文件都来自父文件夹及其所有子级文件夹，request 以 `.stories.js` 结尾。

 

2.一个 context module 会返回一个（require）函数，此函数可以接收一个参数：request

require函数有三个属性：resolve, keys, id

resolve：是一个函数，它返回 request 被解析后得到的模块 id，既这个匹配文件相对于整个工程的相对路径

keys： 也是一个函数，它返回一个数组，由匹配成功模块的名字组成的数组。

id: 执行环境的id，返回的是一个字符串，主要用在module.hot.accept，应该是热加载

 比如：如果想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件

function importAll(r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /\.js$/));

 

细节参见官方中文文档：

https://webpack.docschina.org/guides/dependency-management/#requirecontext