webpack中require.context的作用
可以用来干什么?
require.context 是webpack的一个api,通过执行require.context()函数,来获取指定的文件夹内的特定文件,在需要多次从同一个文件夹内倒入的模块,使用这个函数可以自动倒入,不用每个都显示的写import来引入。
vue项目中 使用require.context()实现前端工程化引入文件
require.context(directory, useSubdirectories, regExp, mode = 'sync')
- directory:表示检索的目录
- useSubdirectories:表示是否检索子文件夹
- regExp:匹配文件的正则表达式,一般是文件名
- mode:加载模式,同步/异步
例如:
const req = require.context('./svg', false, /\.svg$/)
其返回值是:
var map = {
"./dashboard.svg": "./src/icons/svg/dashboard.svg",
"./example.svg": "./src/icons/svg/example.svg",
"./eye-open.svg": "./src/icons/svg/eye-open.svg",
"./eye.svg": "./src/icons/svg/eye.svg",
"./form.svg": "./src/icons/svg/form.svg",
"./link.svg": "./src/icons/svg/link.svg",
"./nested.svg": "./src/icons/svg/nested.svg",
"./password.svg": "./src/icons/svg/password.svg",
"./table.svg": "./src/icons/svg/table.svg",
"./tree.svg": "./src/icons/svg/tree.svg",
"./user.svg": "./src/icons/svg/user.svg"
};
function webpackContext(req) {
var id = webpackContextResolve(req);
return __webpack_require__(id);
}
function 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];
}
webpackContext.keys = function webpackContextKeys() {
return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./src/icons/svg sync \\.svg$";
- keys: 返回匹配成功模块的名字组成的数组
- resolve: 接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
- id: 执行环境的id,返回的是一个字符串
req.keys()
//返回的是一个以map中的key值
['./dashboard.svg', './example.svg', './eye-open.svg', './eye.svg', './form.svg', './link.svg', './nested.svg', './password.svg', './table.svg', './tree.svg', './user.svg']
如何用?
const req = require.context('./svg', false, /\.svg$/)
const importAll = requireContext => {
const map = {}
for (const key of requireContext.keys()) {
map[key] = requireContext(key)
}
return map
}
export default importAll(req)
//or------------------------------------------------------
const requireAll = requireContext => requireContext.keys().map(requireContext)
export default requireAll(req)
Comments | NOTHING