webpack知识小结--require.context方法

本文介绍了带表达式的require语句在Webpack中的工作原理,包括如何创建模块上下文、使用require.context方法及其参数设置,并解释了该函数提供的resolve、keys和id等属性的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

带表达式的 require 语句

如果你的 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入

require("./template/" + name + ".ejs");

webpack 解析 require() 的调用,提取出来如下这些信息:

Directory: ./template
Regular expression: /^.*\.ejs$/

则会返回template目录下的所有后缀为.ejs模块的引用,包含子目录。

require.context

可以使用 require.context() 方法来创建自己的(模块)上下文,这个方法有 3 个参数:要搜索的文件夹目录,是否还应该搜索它的子目录,以及一个匹配文件的正则表达式。

require.context(directory, useSubdirectories = false, regExp = /^\.\//)
require.context("./test", false, /\.test\.js$/);
//(创建了)一个包含了 test 文件夹(不包含子目录)下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。
require.context("../", true, /\.stories\.js$/);
////(创建了)一个包含了父级文件夹(包含子目录)下面,所有文件名以 `.stories.js` 结尾的文件的上下文。

require.context模块导出(返回)一个(require)函数,这个函数可以接收一个参数:request 函数–这里的 request 应该是指在 require() 语句中的表达式
require.context 第一个参数不能是变量,webpack在编译阶段无法定位目录

导出的方法有 3 个属性: resolve, keys, id。

resolve 是一个函数,它返回请求被解析后得到的模块 id。
keys 也是一个函数,它返回一个数组,由所有可能被上下文模块处理的请求组成。
id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

转自webpack官方文档

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值