require.context 查询子目录,过滤不想取出的文件
时间: 2023-07-18 20:30:00 浏览: 45
`require.context` 是 webpack 提供的一个函数,用于在代码中动态地加载模块。如果要查询子目录,可以在第一个参数中指定一个目录的相对路径,第二个参数指定是否查询子目录,例如:
```
const modules = require.context('./components', true, /\.js$/);
```
这个例子中,`require.context` 会在 `./components` 目录及其子目录中查找所有以 `.js` 结尾的模块文件。如果不想取出某些文件,可以在正则表达式中添加过滤条件,例如:
```
const modules = require.context('./components', true, /^(?!.*(?:ignore|exclude)\.js$).*\.js$/);
```
这个例子中,正则表达式使用了负向前瞻,匹配所有以 `.js` 结尾并且文件名不包含 `ignore.js` 或 `exclude.js` 的模块文件。
相关问题
require.context
require.context是webpack提供的一个方法,用于创建一个上下文(context)。它在编译时根据传入的参数,动态地引入符合条件的模块。这个方法接受三个参数,分别是需要引入的文件夹路径、是否需要匹配子文件夹以及匹配的文件正则表达式。通过调用require.context方法,我们可以获取到所有符合条件的模块,并对它们进行相应的处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [require.context()的用法详解](https://blog.csdn.net/ksjdbdh/article/details/122349542)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [require.context介绍](https://blog.csdn.net/weixin_45337170/article/details/120126739)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
require.context 库里图片
require.context是一个webpack提供的方法,用于在打包过程中动态地引入多个模块。在使用require.context时,我们可以传入一个文件夹路径、是否递归遍历子文件夹的布尔值以及一个匹配文件的正则表达式。
如果你想在项目中引入一个文件夹下的所有图片,可以使用require.context来实现。以下是一个示例代码:
```
const images = require.context('./images', false, /\.(png|jpe?g|svg)$/);
const imagePaths = images.keys().map(images);
```
上述代码中,`./images`是图片文件夹的路径,`false`表示不递归遍历子文件夹,`/\.(png|jpe?g|svg)$/`是用于匹配图片文件的正则表达式。
通过`images.keys()`方法可以获取到匹配到的所有图片文件的相对路径,然后使用`.map()`方法将相对路径转换为具体的模块。
注意:使用require.context需要在webpack环境下使用,因此在非webpack项目中无法使用该方法。