webpack的require.context()用法_webpack require.context-CSDN博客

本文链接：https://blog.csdn.net/qq_41579327/article/details/130153987

文章介绍了require.context函数的使用方法，用于在指定目录下检索.js文件并自动加载。通过配置是否搜索子目录及文件匹配规则，可以构建模块对象。两种用法分别展示了如何处理exportdefault和非default导出，生成以文件名为键的对象结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参数

require.context(directory, useSubdirectories, regExp)

参数	说明
directory	检索的目录
useSubdirectories	是否检索子文件夹
regExp	匹配文件的正则表达式

用法1：

以文件名作为对象键

// 检索 ./modules 下面所有的 .js 文件
const modulesFiles = require.context('./modules', true, /\.js$/)
// reduce 处理
const modules = modulesFiles.keys().reduce((res, cur) => {
  // 获取文件名
  const name = cur.replace(/^\.\/(.*)\.\w+$/, '$1')
  // 获取 export default 或 export
  const value = modulesFiles(cur)
  // 以文件名为键，新增属性
  res[name] = value.default || value
  return res
}, {})
console.log('modules：', modules)
export default modules

用法2：

export default 默认导出就以文件名作为对象键，否则就用 export 导出的对象名

// 检索 ./modules 下面所有的 .js 文件
const modulesFiles = require.context('./modules', true, /\.js$/)
// reduce 处理
const modules = modulesFiles.keys().reduce((res, cur) => {
  // 读取 export
  const value = modulesFiles(cur)
  // 判断是否 export default
  if (value.default) {
    const name = cur.replace(/^\.\/(.*)\.\w+$/, '$1')
    res[name] = value.default
  } else res = { ...res, ...value }
  return res
}, {})
console.log('modules', modules)
export default modules

详细用法可参考：require.context()的用法详解_白嫖leader的博客-CSDN博客