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 ...
随机推荐
- python笔记--------numpy
numpy.zeros() 功能:创建零矩阵 numpy.mean(a, axis, dtype, out,keepdims ) 功能:对数据求均值. 参数介绍: a:数据,一般为矩阵 axis:未设 ...
- OAuth 第三方登录授权码(authorization code)方式的小例子
假如上面的网站A,可以通过GitHub账号登录: 下面以OAuth其中一种方式,授权码(authorization code)方式为例. 一.第三方登录的原理 所谓第三方登录,实质就是 OAuth 授 ...
- version GLIBCXX_3.4.21 not defined in file libstdc++.so.6 with link time reference
在python中运行如下: $ python >>> import wx 输出:symbol _ZNSt7__cxx1112basic_stringIwSt11char_traits ...
- POJ 3322 Bloxorz
#include<cstring> #include<algorithm> #include<iostream> #include<cstdio> #i ...
- 【Javascript】数组之二
Array 对象方法 方法 描述 concat() 连接两个或更多的数组,并返回结果. copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中. entries() 返回数组的可迭 ...
- node中https请求 | 实现https的请求,获取图片,然后转成base64字节码
get请求 下面实现https的请求,获取图片,然后转成base64字节码 this.checkCodeUrl = 'https://www.test.com/kaptcha.jsp'; var ht ...
- 函数式编程:面向monad和pipeline编程
将平凡对象转化为monand对象: 将monand对象串联起来进行业务处理.
- 浏览器绘图模型的解释:renderObject、renderlayer
先来看这幅经典的图: https://juejin.im/entry/590801780ce46300617c89b8 renderObject相当于iOS 的view renderlayer完成了一 ...
- Struct Socket详细分析(转)
原文地址:http://anders0913.iteye.com/blog/411986 用户使用socket系统调用编写应用程序时,通过一个数字来表示一个socket,所有的操作都在该数字上进行,这 ...
- hdu1540-Tunnel Warfare-(线段树+二分)
题意:有n个村庄排成一列,相邻的村庄可以通信,炸毁则不可以通信,进行m个操作.3种操作,1.炸毁某村庄:2.修复上一个被炸毁的村庄:3.查询某个村庄能通信的村庄数(自己算一个). 解题:求某个点左边扩 ...