参考链接:

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. 演示Java如何调用Mysql的过程和函数

    这里只演示Java如何调用Mysql的过程和函数 --------------------------------------------------------------------------- ...

  2. [Distributed ML] Yi WANG's talk

    王益,分布式机器学习的践行者,他的足迹值得后来者学习. 膜拜策略: LinkedIn高级分析师王益:大数据时代的理想主义和现实主义(图灵访谈)[心路历程] 分布式机器学习的故事-王益[历史由来] 分布 ...

  3. plantuml语法

    活动图(新语法) 当前活动图(activity diagram)的语法有诸多限制和缺点,比如代码难以维护. 所以从V7947开始提出一种全新的.更好的语法格式和软件实现供用户使用(beta版). 就像 ...

  4. 深入解析d3弦图

    记得上次看d3应该是1年前的事情了,当时还一边看一边写了d3(v5.7)的一个学习笔记:https://www.cnblogs.com/eco-just/tag/d3/ 后来转战three.js就没继 ...

  5. Docker参数 -i -t 的作用

    Docker 参数 -i -t 的作用通常的解释是: -t让docker分配一个伪终端并绑定到容器的标准输入上, -i则让容器的标准输入保持打开. 问题所以通常都是这样的: sudo docker r ...

  6. 20190925 - 使 macOS 的 rm 命令删除到回收站的不完美办法

    今天使用 macOS 时,使用 rm 删除了一个不重要文件,为保证以后不删除重要文件,找到一个让 rm 命令更安全的办法. 使用 MacPorts 安装 rmtrash 命令. sudo port i ...

  7. LeetCode.1217-交换芯片(Play with Chips)

    这是小川的第次更新,第篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第270题(顺位题号是1217).There are some chips, and the i-th ch ...

  8. 【POJ - 3045】Cow Acrobats (贪心)

    Cow Acrobats Descriptions 农夫的N只牛(1<=n<=50,000)决定练习特技表演. 特技表演如下:站在对方的头顶上,形成一个垂直的高度. 每头牛都有重量(1 & ...

  9. 【CodeForces - 939A】Love Triangle(模拟)

    Love Triangle Descriptions: 正如你所知道的,没有男性飞机也没有女性飞机.然而,地球上的每一个平面都喜欢另一个平面.地球上有n个平面,编号从1到n,编号i的平面喜欢编号fi的 ...

  10. C语言递归之翻转二叉树

    题目描述 翻转一棵二叉树. 示例 输入: / \ / \ / \ 输出: / \ / \ / \ 题目要求 /** * Definition for a binary tree node. * str ...