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函数有三个属性:resolvekeysid

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

原文地址:https://www.cnblogs.com/lilililiwang/p/14898547.html