前言

如图，在做项目的过程中需要加载上图中所有的svg图片，按照传统的方式肯定需要一个一个进行导入，非常繁琐并且耗时，接下来介绍一个好用的API可以帮助我们快速的完成这一步骤。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16755.html

用法

requre.context方法是webpack中的一个API，主要用来实现工程自动化，该方法可以自动获取指定文件目录下的指定文件并自动将其进行导入，这就非常适合项目中需要频繁导入资源的场景。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16755.html

该方法共接受三个参数require.context(dirname,useSubdirectories,RegExp)文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16755.html

• 第一个参数代表要读取文件所在的文件目录；
• 第二个参数为布尔值代表是否需要递归查找指定目录下的所有子目录；
• 第三个参数代表要匹配文件的正则表达式；

它的返回值是一个函数，这个函数其实并不是我们需要关心的，真正对我们有用的是该函数上的keys方法，该方法可以将匹配成功的文件以数组的形式进行返回。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16755.html

const files = require.context();
console.log(files.keys());

下面来看一下该方法的一些应用场景。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16755.html

应用场景

引入vuex中的module

当在store中拆分多个module时传统做法避免不了需要使用大量的import语句进行导入，如图：文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16755.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16755.html

这个时候就非常适合使用require.context方法进行改造，调用该方法并传入相应的参数信息，我们需要引入的资源都在modules文件夹中所以第一个参数为此文件夹的相对路径，该目录下并没有子目录所以第二个参数为false，我们只希望匹配出所有的js文件因此可以在第三个参数中写上只匹配以js结尾的文件的正则表达式。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16755.html

现在就已经获取到了所有的分模块，调用keys方法转为数组并对其进行遍历操作，每一个item都是一个模块的相对路径，把该路径传入到require.context方法返回的函数中就可以得到该文件模块里面的内容并将其作为声明modules对象的value，然后将item这个路径字符串进行替换只留下其文件名称作为modules对象的key，最后modules对象中就包含了所有我们需要导入的对象，再将其展开放入modules选项中即可。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16755.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/16755.html

// 对以上关键信息进行打印
console.log(key); // ["./moduleA.js","./moduleB.js"]

files(item); // {default:模块中导出的对象}

可以看到代码中并没有进行任何的导入操作也可以实现功能，而且这种方式相对还比较灵活，再增加文件也不需要再去手动添加代码。

引入组件

引入组件也是同样的道理：

引入svg资源

最后再来说下在vue2中如何引入svg图片，首先使用npm i svg-sprite-loader命令安装svg-sprite-loader，然后在webpack中进行配置即可。

  chainWebpack(config) {
    config.plugins.delete("preload"); 
    config.plugins.delete("prefetch");

    // svg-sprite-loader
    config.module.rule("svg").exclude.add(resolve("src/icons")).end();
    config.module
      .rule("icons")
      .test(/.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]", // 自定义格式
      })
      .end();
  }

可以直接在组件中使用也可以单独写一个组件，推荐将其封装为组件的形式。

<svg>
    <use href="#icon-eye-open"></use>
</svg>

可以使用require.context的场景还有很多，但是只支持在vue2中使用，个人觉得可能是因为vue3是基于ESMdule规范的所以并不兼容这一语法，但是在vue3中也有新的方法可以使用，这里就不展开了。