vue之require.context(自动加载js模块等作用)

require.context
初识 require.context
require.context是webpack中，用来创建自己的（模块）上下文

webpack会在构建的时候解析代码中的require.context()

require.context函数接收三个参数：
1. 要搜索的文件夹目录
2. 是否还应该搜索它的子目录
3. 以及一个匹配文件的正则表达式

// 语法

require.context(directory, useSubdirectories = false, regExp = /^\.\//);
1
// 示例

const testFiles = require.context('./test', false, /\.test\.js$/);
1
// （创建了）一个包含了 test 文件夹（不包含子目录）下面的、所有文件名以 .test.js 结尾的、能被 require 请求到的文件的上下文。

通过打印, 可以看出返回的是一个函数，意思就是说，require.context模块导出（返回）一个（require）函数。
这个函数有三个属性：

resolve：是一个函数，它返回请求被解析后得到的模块 id。
keys：也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。
id：是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
调用 testFiles.keys() 可以打印出./test目录下所有test文件集合

const files = require.context('./modules', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
   modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default;
})

export default modules

// files(key).default  获取文件中使用default导出的内容。

 

 

 

 

原文链接：https://blog.csdn.net/zyhzyh1120/article/details/108693045