参考链接:

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. Swagger介绍及使用

    相信无论是前端还是后端开发,都或多或少地被接口文档折磨过.前端经常抱怨后端给的接口文档与实际情况不一致.后端又觉得编写及维护接口文档会耗费不少精力,经常来不及更新.其实无论是前端调用后端,还是后端调用 ...

  2. linux下编译安装ACE-6.4.2(adpative communication environment)

    1.环境 CentOS-6.5-x86_64-bin-DVD1.iso VMware_workstation_full_12.5.2 (2).exe ACE-6.4.2.tar.gz 下载链接:htt ...

  3. SDTP协议

    转载于 http://blog.csdn.net/fan_hai_ping/article/details/11797449 SDTP协议细则

  4. spring cloud之Eureka不能注销docker部署的实例

    1 起因 事件的起因是这样的,我们在微服务改造的过程中,选择将服务注册到eureka中,开发的时候还好,使用场景是这样的: 在idea中启动服务,成功注册到eureka,关闭服务,eureka成功注销 ...

  5. js大文件上传

    一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...

  6. linux下后台启动springboot项目(转载)

    我们知道启动springboot的项目有三种方式: 运行主方法启动 使用命令 mvn spring-boot:run”在命令行启动该应用 运行“mvn package”进行打包时,会打包成一个可以直接 ...

  7. ParallelForTransform作业

    ParallelForTransform作业是另一种ParallelFor作业 ; 专为在变形上操作而设计. 注意:ParallelForTransform作业是Unity中用于实现IJobParal ...

  8. LeetCode.1160-找到可以由给定字符组成的字符串(Find Words That Can Be Formed by Characters)

    这是小川的第411次更新,第443篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第262题(顺位题号是1160).你会得到一个字符串单词数组和一个字符串chars.如果字符串可 ...

  9. 安装aodh

    在控制节点上执行 #!/bin/bash MYSQL_ROOT_PASSWD='m4r!adbOP' GNOCCHI_PASSWD='gnocchi1234!' CEILOMETER_PASSWD=' ...

  10. Windows Server 2019 SSH Server

    Windows Server 2019 SSH Server   在需要安裝的ws2019开启powershell,执行安装 openssh server 指令 Add-WindowsCapabili ...