带表达式的 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()方法的更多相关文章

  1. [Vue]webpack的require与require.context

    1.require 1.1完整路径的require语句: require('tools'); //preset alias tools require('./js/main'); 1.2带表达式的 r ...

  2. php中的require() 语句的使用方法

    php中的require() 语句的使用方法 require()语句包括并运行指定文件. require()语句包括并运行指定文件.有关包括如何工作的详细信息见 include() 的文档. requ ...

  3. require和require.async的区别

    本文用seajs来讲解两种模块加载方式require和require.async的区别,类似java里的import,php里的include. <!DOCTYPE html> <h ...

  4. python pip 出现locations that require TLS/SSL异常处理方法

    python pip 出现locations that require TLS/SSL异常处理方法 转载 郑才华 发布于2018-03-24 21:41:16 阅读数 51844 收藏 展开 最近在r ...

  5. vue-cli+webpack在生成的项目中使用bootstrap方法(二)

    vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多. 当然是可以更省力些,可以通过 ...

  6. 转 拉姆达表达式,委托、匿名方法、Lambda表达式的演进

    总结:Lambda表达式的语法:(参数列表=>执行语句) 无参数格式 :()=>{执行语句} 有参数格式:x=> x % 2 == 0 1.假设给我们一个泛型对象List<T& ...

  7. refreshContext(context)方法源码探究

    该方法目的是刷新应用上下文,是容器启动最主要的方法,其实现是一个模板方法,内容巨大,所以先看模板方法都做了哪些事,然后再细看每个方法的实现机制. refreshContext(context)方法首先 ...

  8. 使用带ParserContext参数的Xaml.Load方法

    原文:使用带ParserContext参数的Xaml.Load方法 如果一段XAML中存在一个标记需要从外部命名空间中解析, 就需要用到ParserContext类,  具体用法如下: Normal ...

  9. Lambda表达式匿名类实现接口方法

    Lamb表达式匿名类实现接口方法 import java.util.ArrayList; public class HandlerDemo{ public static void main(Strin ...

随机推荐

  1. android.view.ViewRoot$CalledFromWrongThreadException 异常的解决方案

    https://blog.csdn.net/vincent_czz/article/details/7070354 https://stackoverflow.com/questions/210141 ...

  2. k8s的node节点无法调度的问题

    1.现象,创建deployment时 2.查看污点 [fedora@k8s-cluster--ycmwlao4q5wz-master- ~]$ kubectl describe node k8s-cl ...

  3. Linux运维技术之详解任务计划(crontab命令)

    crontab命令 按照预先设置的时间周期(分钟.小时.天……)重复执行用户指定的命令操作,属于周期性计划任务 (1).先来看一下/etc/crontab文件的内容: [root@localhost ...

  4. (05节)快速搭建SSM项目

    1.1  快速搭建Web项目 注意点:name:archetypeCatalog,value:internal 原因:Intellij IDEA根据maven archetype的本质,执行mvn a ...

  5. Elasticsearch Date类型,时间存储相关说明

    资料 网址 Elasticsearch 插入时间字段时数据格式问题 https://segmentfault.com/a/1190000016296983 Elasticsearch Date类型,时 ...

  6. 使用 Express Generator快速创建Express应用

    全局安装express-generator npm install express-generator -g 根据需求生成自己需要的模板 生成ejs模板:express demo --view=ejs ...

  7. windows下的批处理bat文件和Linux下的shell文件的互相转换

    shell(Linux.Solaris) bat(windows) 含义 # rem 注释行 /[directory]/[directory]/.../[directory]/ [disk]:\[di ...

  8. [译] 在 UNIX 中,一切皆文件

    原文地址:In UNIX Everything is a File 原文作者:ph7spot.com 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:pmw ...

  9. c++、oc、swift初步评价

    c++是面向对象的多态语言: oc是面向对象的动态语言: swift是面向对象.面向协议.高阶类型.函数式编程语言:

  10. UNICODE和UCS

    Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案.目前的Unicode字符分为17组编排,0x0000 至 0xFFFF,每组称为平面(Plane),而每平面拥有65536个码 ...