require.context实现自动导入指定目录依赖(webpack前端工程化)

代码

const modulesFiles = require.context('./modules', true, /\.js$/);
//	require.context accepts three params
//	search directory、whether search subdirectories and a regular expression to match files

//	you do not need `import app from './modules/app'`
//	it will auto require all module from modules file
export const modules = modulesFiles.keys().reduce((modules, modulePath) => {
	//	set './app.js' => 'app'
	const moduleName = modulePath.replace(/(.*\/)*([^.]+).*/ig, '$2');
	const value = modulesFiles(modulePath);
	modules[moduleName] = value.default || value;
	return modules;
), {})

require.context接受三个参数，一个要搜索的目录，一个标记表示是否还搜索其子目录，以及一个匹配文件的正则表达式，一个可选参数是否同步加载。

webpack 会在构建中解析代码中的 require.context()。
require 方法会生成一个 context module(上下文模块)。

语法

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

返回值

require.context 返回一个（require）函数，该函数可以接收一个参数: request。
此导出函数有三个属性: resolve、keys和 id。

• resolve是一个函数，它返回 request被解析后得到的模块 id。
• keys也是一个函数，它返回一个数组，由所有可能被此 context module 处理的请求。
• id是 context module 的模块 id。它可能在你使用 module.hot.accept时会用到。

警告

传递给 require.context 的参数必须是字面量(literal)！

其他介绍

reduce 方法对数组中每个元素执行提供的 reducer 方法，并将结果汇总为单个返回值。