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$";

1. keys: 返回匹配成功模块的名字组成的数组
2. resolve: 接受一个参数request，request为test文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径
3. 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)