require.context()

require.context()

require.context 是一个 webpack 的 api ，主要是用于获取一个文件中的所有文件，不过需要有过滤参数。这个是用来实现自动化导入模块，在前端实现的过程中，我们是有时候会导入挺多的文件，可以不需要 import app from ‘./modules/app’ ， 使用这个api了， 自动导入

我一般会在store中使用这个api

在使用这个api的时候，我们可以直接在index.js这个文件中写入，这里就省略了多余的 import app from ‘./modules/app’

下面使用

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

// 下面导出的时候直接使用modules 就好了

require.context()
这个接受3个参数

directory // 目录文件
useSubdirectories = true // 标记表示是否还搜索其子目录 这个值是Boolean 类型
regExp = /^\.\/.*$/ // 匹配文件的正则表达式

写法

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/)
);

示例

require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。

这里需要注意的是，require.context() 返回的是一个函数，这个函数有3个属性

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

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

3、id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?