参考链接:

1、https://www.jianshu.com/p/c894ea00dfec

2、https://www.jianshu.com/p/c894ea00dfec

require.context()

1、可以使用require.context()函数创建自己的上下文。它允许您传入一个,目录进行搜索,一个标志指示是否应该搜索子目录,还有一个正则表达式来匹配文件。

例:查找当前svg目录下的,以.svg结尾的文件,且可以对子目录进行搜索
const svgFiles = require.context('./svg', true, /\.svg$/);

2、require.context()函数执行后返回的是一个函数,并且这个函数有3个属性:resolve 、keys、id

  ① resolve {Fuction} 接收一个参数request,request为 svg 文件夹下面匹配文件的相对路径,返回这个匹配文件对于整个工程的相对路径;

  ② keys {Function} 返回匹配成功模块的名字组成的数组,例:如下:

const iconList = svgFiles.keys().map(item => svgFiles(item));

  ③ id {String} 执行环境的id,返回的是一个字符串

require.context() 用于获取一个特定上下文的,webpack的一个api的更多相关文章

  1. require.context实现前端工程自动化

    require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...

  2. vue 动态注册路由 require.context

    需求场景: 在日常的功能练习和调试过程中,需要一个demo项目进行功能测试,由于频繁.vue页面的同时,又要再router.js文件里面注册路由,感觉有点无聊和枯燥.基于此出发点,考虑能否自动读取文件 ...

  3. 使用require.context实现前端工程自动化

    require.context是什么 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...

  4. vuex前端工程化之动态导入文件--require.context( )

    随着项目的复杂,文件结构越来越多,Store中modules中的文件也越来越多,如果一个一个加载是不是很麻烦呢? 先看一个项目中store项目结构: 过去都是通过import分别引入文件: 1 imp ...

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

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

  6. dva webpack 利用require.context加载多个model

    dva redux数据管理都在models,根据业务不同models可能会有几十甚至上百的 [模块.js], 每次在index.js使用 app.model(require('./models/exa ...

  7. webpack的带表达式require和require.context()方法

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

  8. require.context

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

  9. 自己封装的一个js方法用于获取显示的星期和日期时间

    自己封装的一个js方法用于获取显示的星期和日期时间 /** * 获取用于显示的星期和日期时间 * @param date * @returns {string} */ function getWeek ...

随机推荐

  1. Spring配置文件里加载路径中的通配符

    ?代表匹配任意一个字符            *代表匹配0个或多个任意字符             **/匹配任意多个目录 classpath:app-Beans.xml 查找app-Beans.xm ...

  2. docker 安装 jmeter

    1.下载jmeterwget http://mirrors.tuna.tsinghua.edu.cn/apache//jmeter/binaries/apache-jmeter-5.1.1.tgz2. ...

  3. RDD的cache 与 checkpoint 的区别

    问题:cache 与 checkpoint 的区别? 关于这个问题,Tathagata Das 有一段回答: There is a significant difference between cac ...

  4. Delphi使用TADOQuery的RowsAffected属性时需要注意的一个点

    测试环境是:Delphi 6.Oracle.PLSQL 先创建一个模拟测试的数据表,并且添加几条模拟的数据 create table practice(uno varchar(8), uname va ...

  5. 使用青花瓷(charles)抓包

    官网下载charles: https://www.charlesproxy.com/download/ MAC & Apple 打开青花瓷charles 找到本地IP:青花瓷里面Help-&g ...

  6. sql内联注入

    测试字符串 变    种 预 期 结 果 ' 触发错误.如果成功,数据库将返回一个错误 1' or '1'='1 1') or ('1'='1 永真条件.如果成功,将返回表中所有的行 value' o ...

  7. 【并行计算-CUDA开发】浅谈GPU并行计算新趋势

    随着GPU的可编程性不断增强,GPU的应用能力已经远远超出了图形渲染任务,利用GPU完成通用计算的研究逐渐活跃起来,将GPU用于图形渲染以外领域的计算成为GPGPU(General Purpose c ...

  8. Mac下使用sshpass让iterm2支持多ssh登录信息保存

    mac下没有xshell等连接linux服务器的工具,当需要管理的服务器越来越多之后,密码管理就成了一个很头疼的问题,每次都需要去复制粘贴密码,浪费了很多时间,在网上查了不少资料,发现mac下可以使用 ...

  9. python标准库之shutil——可操作权限的文件操作库

    转载自:https://www.jb51.net/article/145522.htm shutil模块提供了许多关于文件和文件集合的高级操作,特别提供了支持文件复制和删除的功能. 文件夹与文件操作 ...

  10. python之函数形参、实参、可变长参数整体使用和分类

    形参与实参 '''def fn(形参们): pass fn(实参们)'''# 形参:定义函数,在括号内声明的变量名,用来结束外界传来的值# 实参:调用函数,在括号内传入的实际值,值可以为常量.变量.表 ...