require.context

448 阅读1分钟

可以通过 require.context() 函数来创建自己的 context。

require.context() 函数可以传入三个参数:
1.要搜索的目录
2.标记是否还搜索其子目录
3.匹配文件的正则表达式

webpack 会在构建中解析代码中的 require.context()。

语法如下: image.png

举例: image.png

image.png

获取模块目录上下文,获得的结果是一个

webpackContext(req) {  
    return __webpack_require__(webpackContextResolve(req))  
}  

这个方法又返回一个 __webpack_require__,这个 __webpack_require__ 就相当于 require 或者 import
同时,webpackContext 还有两个静态方法 keysresolve,一个 id 属性

  1. keys: 返回匹配成功模块的名字组成的数组
  2. resolve:是一个函数,返回的是被解析模块的 id
  3. id:执行环境的 id,返回的是一个字符串,主要用在 module.hot.accept,应该是热加载

image.png

参考文章
webpack require.context 官方文档