require.context()的用法

一般用于加载某个目录下的多个文件，如：

const modules = require.context('./components/', false, /\.vue$/);

require.context()接收三个参数，第一个参数是要加载的文件目录地址，第二个参数是true或false，表示是否需要加载子目录，第三个参数是个正则表达式，表示要加载哪些文件，上面代码表示要加载components目录下的.vue文件。

modules得到的值是一个函数：

ƒ webpackContext(req) {
	var id = webpackContextResolve(req);
	return __webpack_require__(id);
}

该函数有三个属性：resolve,keys,id。

通过打印modules.resolve,modules.keys,modules.id可以得到相应结果

modules.resolve

ƒ webpackContextResolve(req) {
	if(!__webpack_require__.o(map, req)) {
		var e = new Error("Cannot find module '" + req + "'");
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	}
	return map[req];
}

modules.keys

ƒ webpackContextKeys() {
	return Object.keys(map);
}

modules.id

./src/store sync \.js$

 可以看出resolve和keys都是函数，id暂时没有应用场景，所以这里不做介绍。

modules.resolve接收一个参数，这个参数是modules这个函数传入的参数

ƒ webpackContext(req) {
	var id = webpackContextResolve(req);
	return __webpack_require__(id);
}

modules.resolve也就是webpackContextResolve(req)，返回的是加载模块的id，接收的参数req是加载文件的相对路径，这个值可以从keys方法的返回值中获取到。

上面代码中return __webpack_require__(id)，将会执行加载该模块的指令。

modules.keys()的返回结果是一个数组，数组中的值是components目录下文件的相对路径，如['./a.vue','./b.vue','./c.vue']。

经过以上代码讲解后，通过require.context方法加载模块的写法如下，以加载store中的modules为例：

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

const store = new Vuex.Store({
    modules
});

通过reduce方法循环，将每个js中export default出的对象放在modules中并return，最后将modules丢到Vuex.Strore中。