前言

我们在开发工程的时候，有时候，某个文件夹下的文件都需要 import 进来。最常见的就是 svg 图片批量引入，详见上篇文章 封装 svg-icon 组件。当然除此之外，还用于批量引入 js 文件等。

webpack 提供了一些全局方法供用户使用，其中的 require.context()就是用于实现批量引入的，详见 Module Methods | webpack。

用法

  1. // 遍历文件
  2. const context = require.context(directory, includeSubDir, regexp);
  4. /*
  5. directory 是要搜索的目录，includeSubDir 表示是否搜索子目录， regexp 是匹配文件的正则表达式.
  6. 返回值 context 是一个用于加载模块的函数。调用函数加载模块，但是要传递模块 id。
  7. 返回值 context 还附带了三个属性：resolve()、id、keys()
  8. context.resolve() 会返回给定请求路径的解析后的绝对路径，但并不实际导入模块。它主要用于获取模块的路径信息，而不是模块的内容。
  9. context.id 是这个模块的上下文 id
  10. context.keys() 这个是常用的，返回所有的文件模块 id
  11. */
  13. // 一般写法
  14. context.keys().forEach(item => context(item));
  16. // 简写
  17. context.keys().forEach(context);
  19. // 拿到返回值的写法
  20. context.keys().forEach(item => {
  21.   const res = context(item);
  22.   console.log(res.default);
  23. })

参考

动态引入模块：Webpack require.context 的灵活运用