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 ...
随机推荐
- UISlider基本使用
UISlider是一个很常用的UI控件,调节屏幕亮度或者调节音量大小等很多地方都可以用到,而且使用方便,下面我来介绍一下UISlider的基本使用. 首先介绍一下基本属性和常用方法: //设置当前sl ...
- Buffer、核心API、npm
Buffer基本操作 Buffer对象是Node处理二进制数据的一个接口.它是Node原生提供的全局对象,可以直接使用,不需要require(‘buffer’). 实例化 Buffer.from( ...
- Pandas 之 描述性统计案例
认识 jupyter地址: https://nbviewer.jupyter.org/github/chenjieyouge/jupyter_share/blob/master/share/panda ...
- JavaScript基础内容中的函数详解
函数 函数:即方法 函数就是一段预先设置的功能代码块,可以反复调用,根据输入参数的不同,返回不同的值. 为什么使用函数: 1.方便调用 2.代码重用,利于维护 3.便于修改,便于重构 4.简化逻辑,利 ...
- HDU4183 Pahom on Water(来回走最大流,一个点只经过一次)
题意: 有n个圆,每个圆的中心和半径和一个频率都给定,只有一个频率最高的789为紫色,只有一个最低的400为红色,规则如下: 1.当两个圆严格相交时,且人是从红色到紫色的方向运动时可以由低频率向高频率 ...
- Selenium_webdriver+java通过读取firefox、chrome的cookie文件,实现自动登录
遇到过很多问题,通过查资料得出的最终结果!
- ArcGIS Server 注册托管数据库
需要已经安装好ArcGIS for Desktop.ArcGIS for Server和ArcSDE,并且已经创建了地理数据库 我试了用管理网站添加,总是不成功,后来用ArcCatalog添加成功.这 ...
- Java的Socket通信简单实例
服务端 package testlxd; import java.io.BufferedReader; import java.io.IOException; import java.io.Input ...
- js spread object
What’s is the benefit / drawback of these two alternatives? Using object spread options = {...option ...
- Worldview in Context
Worldview in Context Figures 1 and 2 provide a basis for a deeper understanding of worldview. The se ...