作用
require.context()方法是webpack的一个api,主要功能是自动注入文件,避
免因项目庞大文件过多,一个一个手动引入。举个栗子
结构图
上菜
/* require.context(params1, params2, params3)
参数1: 读取文件的路径
参数2: 是否遍历文件的子目录
参数3: 匹配文件的正则
*/
const req = require.context('./', false, /\.js$/)
/* 打印req: 返回 引入文件的方法
对应webpack上下文
var map = { 文件夹下匹配的文件对象
"./element.js": "./src/plugins/element.js",
"./index.js": "./src/plugins/index.js"
};
function webpackContext(req) { 引入文件的方法
var id = webpackContextResolve(req);
return __webpack_require__(id);
}
function webpackContextResolve(req) { 获取文件对象map的value
if(!__webpack_require__.o(map, req)) {
var e = new Error("Cannot find module '" + req + "'");
e.code = 'MODULE_NOT_FOUND';
throw e;
}
return map[req];
}
webpackContext.keys = function webpackContextKeys() { 获取文件对象map的key
return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./src/plugins sync \\.js$";
*/
const requireAll = requireContext => {
let allFileName = requireContext.keys()
let index = allFileName.indexOf('./index.js')
allFileName.splice(index, 1)
/* 将数组allFileName的每一个元素全部执行一遍requireContext函数
requireContext就是这个函数 会执行引入文件的操作
function webpackContext(req) {
var id = webpackContextResolve(req);
return __webpack_require__(id);
}
*/
return allFileName.map(requireContext)
}
requireAll(req)
下面拿请求地址做个演练
结构图
上菜
// 当前目录文件自动注入
const req = require.context('./', false, /\.js$/)
let apiUrl = {
} // 储存所有api模块请求地址
const requireAll = requireContext => {
const FILE_NAME = requireContext.keys()
let index = FILE_NAME.indexOf('./api.js')
FILE_NAME.splice(index, 1)
FILE_NAME.map(requireContext).forEach( item => {
apiUrl = {
...apiUrl, ...item.default} // 合并所有请求路径
})
return FILE_NAME.map(requireContext)
}
requireAll(req)
export default apiUrl
总结
require.context()这个webpack的api,适合做js方法、规则,路由地址、
请求地址、css文件等等一系列需要大量引入文件的情况,手动引入费时费
力而且极其不雅,require.context()不但可以自动注入省事,而且让代码
看起来相当优雅