require.context的用法介绍（附示例）-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于require.context的用法介绍（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

起因：为什么会突然用到webpack这个管理特性呢？

项目某个页面需要引入N张demo图片。即资源的批量引入：如果要引入10+个以上的图片资源，就需要写10+个如下的引入代码：import XXX from 'relative/path/assets/imgs/xxx';，那如果再多一点的静态资源需要引入呢？这时候require.context就派上了用场。

文档

官方文档的介绍先放在这里，可小觑一下，了解使用姿势。

栗子来一个

话不多说，针对上面的场景，我们上一下代码吧。

场景需要我们引入某个指定文件夹下的所有webp格式的图片，在单击demo1的时候展示demo1下的x张案例图，在单击demoX的时候展示demoX下的x张案例图。

// 通过require.context的方式引入指定的路径下匹配到的模块引用
const demoImgsContext = require.context('@src/assets/imgs/demo', false, /\.webp$/);
...
// 使用姿势
trigger(type) {
    this.demoImgs = Arry.from({length: config.type}, (key, value) => value + 1)
        .map(index => demoImgsContext(`./${type}_demo${index}.webp`));
}

举一反三的场景还有需要的么？
比如vuex引入多个module的store。也可以使用这个方法。

// 添加module文件是，文件命请按照module_XXX的方式命名
// 自动引入module文件夹下的js文件
const mutationContext = require.context('./module', false, /.*\.js/);
const modules = mutationContext.keys().reduce((prev, cur) => {
    // 排除module_root文件
    const matches = cur.match(/module_(?!.*root)(\w+)\.js/);
    const key = matches && matches[1];
    key && (prev[key] = mutationContext(cur).default);
    return prev;
}, {});