require.context的了解

對下面這段代碼的了解

const srcContext = require.context('../../src', true, /\.(vue|js)$/);
srcContext.keys().forEach(srcContext);
           

第一行代碼，定義的常量 srcContext傳回的内容如下：

var map={
"./components/test/test.vue": "./src/components//test/test.vue",
	"./pages/index.js": "./src/pages/index.js"
};
function webpackContext(req) {
	return __webpack_require__(webpackContextResolve(req));
};
function webpackContextResolve(req) {
	var id = map[req];
	if(!(id + 1)) // check for number or string
		throw new Error("Cannot find module '" + req + "'.");
	return id;
};
webpackContext.keys = function webpackContextKeys() {
	return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./src recursive \\.(vue|js)$";
           

第二行代碼，srcContext.keys()傳回的内容如下：

["./components/test/test.vue","./pages/index.js"]
           

forEach(srcContext)中的srcContext 就是module.exports後的webpackContext；

其實調用的是

function webpackContext(req){ };

傳入的req參數為srcContext.keys()中的每一項；

如：第一次周遊的時候傳入的是"./components/test/test.vue"，

調用webpackContextResolve(req)後傳回的值為 “./src/components//test/test.vue”;

調用下面的方法後，會将正規表達式比對到的所有的檔案require進來

function webpackContext(req) {
	return __webpack_require__(webpackContextResolve(req));
};