webpack的带表达式require和require.context()方法
带表达式的 require 语句
如果 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入
require("./template/" + name + ".ejs");
1
webpack 解析 require() 的调用,提取出来如下这些信息:
Directory: ./template
Regular expression: /^.*\.ejs$/12
1
2
会返回template目录下的所有后缀为.ejs模块的引用,包含子目录。
require.context()
可以使用 require.context() 方法来创建自己的(模块)上下文。
这个方法有 3 个参数:
要搜索的文件夹目录
是否还应该搜索它的子目录
以及一个匹配文件的正则表达式。
require.context(directory, useSubdirectories, regExp);
1
使用:
require.context("./test", false, /\.test\.js$/);
//(创建了)一个包含了 test 文件夹(不包含子目录)下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。
1
2
require.context("../", true, /\.stories\.js$/);
//(创建了)一个包含了父级文件夹(包含子目录)下面,所有文件名以 `.stories.js` 结尾的文件的上下文。
1
2
总结:
require.context模块导出(返回)一个(require)函数。这个函数可以接收一个参数:request 函数——这里的 request 应该是指在 require() 语句中的表达式 。
require.context 第一个参数不能是变量,webpack在编译阶段无法定位目录。
导出的方法有 3 个属性: resolve, keys, id。
resolve 是一个函数,它返回请求被解析后得到的模块 id。
keys 也是一个函数,它返回一个数组,由所有可能被上下文模块处理的请求组成。
id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
webpack的带表达式require和require.context()方法的更多相关文章
- [Vue]webpack的require与require.context
1.require 1.1完整路径的require语句: require('tools'); //preset alias tools require('./js/main'); 1.2带表达式的 r ...
- php中的require() 语句的使用方法
php中的require() 语句的使用方法 require()语句包括并运行指定文件. require()语句包括并运行指定文件.有关包括如何工作的详细信息见 include() 的文档. requ ...
- require和require.async的区别
本文用seajs来讲解两种模块加载方式require和require.async的区别,类似java里的import,php里的include. <!DOCTYPE html> <h ...
- python pip 出现locations that require TLS/SSL异常处理方法
python pip 出现locations that require TLS/SSL异常处理方法 转载 郑才华 发布于2018-03-24 21:41:16 阅读数 51844 收藏 展开 最近在r ...
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多. 当然是可以更省力些,可以通过 ...
- 转 拉姆达表达式,委托、匿名方法、Lambda表达式的演进
总结:Lambda表达式的语法:(参数列表=>执行语句) 无参数格式 :()=>{执行语句} 有参数格式:x=> x % 2 == 0 1.假设给我们一个泛型对象List<T& ...
- refreshContext(context)方法源码探究
该方法目的是刷新应用上下文,是容器启动最主要的方法,其实现是一个模板方法,内容巨大,所以先看模板方法都做了哪些事,然后再细看每个方法的实现机制. refreshContext(context)方法首先 ...
- 使用带ParserContext参数的Xaml.Load方法
原文:使用带ParserContext参数的Xaml.Load方法 如果一段XAML中存在一个标记需要从外部命名空间中解析, 就需要用到ParserContext类, 具体用法如下: Normal ...
- Lambda表达式匿名类实现接口方法
Lamb表达式匿名类实现接口方法 import java.util.ArrayList; public class HandlerDemo{ public static void main(Strin ...
随机推荐
- Scroller——startScroll、fling(惯性滑动)
Scroller主要用于平滑滚动,主要使用的滚动方法有:startScroll.fling. startScroll(int startX, int startY, int dx, int dy, i ...
- 虚拟机安装mysql踩坑记录
本章节主要讲解的是在虚拟机centOs7版本以上安装mysql5.6版本,亲测可以直接使用,有需要帮助的小伙伴可以加本人QQ2246451792@qq.com!!!! 卸载centOs7自带的mari ...
- 【异常】Caused by: java.sql.SQLTransientConnectionException: HikariPool-1 - Connection is not available, request timed out after 30005ms.
一.异常出现的场景 一次线上订单历史数据字段刷新操作,3张表100多万数据.由于同步更新太慢大概20分钟以上,所以采用异不的方式.代码如下: private void batchUpdate(List ...
- seaborn---调色板
一.样式控制 1.set([context,style,palette,font,...]) 一步设定美学参数. 2.axes_style([style,rc]) 返回参数字典,用于绘图的美学风格. ...
- dfs 正则表达式
192. 通配符匹配 中文 English 判断两个可能包含通配符“?”和“*”的字符串是否匹配.匹配规则如下: '?' 可以匹配任何单个字符. '*' 可以匹配任意字符串(包括空字符串). 两个串完 ...
- P2220 [HAOI2012]容易题[小学数学]
题目描述 为了使得大家高兴,小Q特意出个自认为的简单题(easy)来满足大家,这道简单题是描述如下: 有一个数列A已知对于所有的A[i]都是1~n的自然数,并且知道对于一些A[i]不能取哪些值,我们定 ...
- Spring Cloud 之 Hystrix 知识点:隔离、熔断、降级
Hystrix 是隔离.熔断以及降级的一个框架. Hystrix 的隔离: Hystrix 会搞很多个小小的线程池,比如订单服务请求库存服务是一个线程池,请求仓储服务是一个线程池,请求积分服务是一个线 ...
- javascript Date format(js日期格式化) 转载
本文转载地址http://www.cnblogs.com/zhangpengshou/archive/2012/07/19/2599053.html // 对Date的扩展,将 Date 转化为指定格 ...
- python基础语法3 整形,浮点,字符串,列表
整形: ========================基本方法===========================用途: 一般用于定义整数:年龄.身份证号.qq号定义方式:age = 18 # a ...
- Ping任务管理模块-JavaWeb
总体框架: 1.创建任务 2.修改任务 3.删除任务 4.环境配置 5.全量PING 6.抽样PING 7.停止 8.查看历史 9.查看执行详情 主要从项目总结和经验角度讲述: 一.项目运行环境 1. ...