webpack中require.context 用法
1.require.context(directory, useSubdirectories = false, regExp = /^\.\//)
Examples:
require.context("./test", false, /\.test\.js$/);
require.context("../", true, /\.stories\.js$/);
2.入参
1. 你要引入文件的目录
2.是否要查找该目录下的子级目录
3.匹配要引入的文件
3.返回的:
1. context.require 返回一个require 函数:
function webpackContext(req) {return __webpack_require__(webpackContextResolve(req));
函数有三个属性:resolve 、keys、id
· resolve: 是一个函数,他返回的是被解析模块的id
· keys: 也是一个函数,他返回的是一个数组,该数组是由所有可能被上下文模块解析的请求对象组成
· id:上下文模块的id
用法:
const pages = require.context('pages', true, /\/.*\.js$/)
pages.keys().map(key => {
if (!key.includes('/store/')) return
const keys = key.replace(/(\.\/|\.js)/g, '')
modules[keys.split('/').pop()] = pages(key).default
})
export default modules
最后把modules注册进去即可
webpack中require.context 用法的更多相关文章
- 一张图带你了解webpack的require.context
很多人应该像我一样,对于webpack的require.context都是一知半解吧.网上很多关于require.context的使用案例,但是我没找到可以帮助我理解这个知识点的,于是也决定自己来探索 ...
- [转]webpack中require和import的区别
webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.incl ...
- webpack中require和import的区别
commonjs同步语法 经典的commonjs同步语法如下: var a = require('./a'); a.show(); 此时webpack会将a.js打包进引用它的文件中.这是最普遍的情形 ...
- dva webpack 利用require.context加载多个model
dva redux数据管理都在models,根据业务不同models可能会有几十甚至上百的 [模块.js], 每次在index.js使用 app.model(require('./models/exa ...
- webpack的require.context()实现路由“去中心化”管理
最近在开发一个大型vue单页面应用的时候,项目最初是将所有的路由写在一个router.js的文件里. const router = new Router({ mode: "history&q ...
- js中require()的用法----JS如何连接数据库执行sql语句或者建立数据库连接池
var vue = require('vue'); 引入vue的意思,commonjs的写法.node都是用require来载入模块的,可以看看webpack+vue. require()可以调用模块 ...
- 关于webpack require.context() 的那点事
先说 webpack里面有这么一招:使用require.context()方法来自动导入模块 官方文档有点深奥,老衲百度下拿了一段来直接使用,但是想看下它是如何运行的 本篇这里不会有太深入的研究,只是 ...
- webpack中,require的五种用法
a.js: module.exports = function(x){ console.log(x); } 一,commonjs同步: var b = require('./a');b('你好')// ...
- webpack中output配置项中chunkFilename属性的用法
chunkFilename和webpack.optimize.CommonsChunkPlugin插件的作用差不多,都是用来将公共模块提取出来,但是用法不一样,这里主要介绍chunkFilename的 ...
随机推荐
- 【漏洞复现】永恒之蓝 ms17-010 漏洞利用 攻击手法
日期:2018-07-21 21:09:16 介绍:永恒之蓝利用的 ms17-010 漏洞,拿 Shell.查看文件.获取密码. 0x01.实验环境 攻击机 系统:macOS Sierra 10.12 ...
- keepalive + nginx 搭建高可用集群动态网站
环境准备: 两台节点部署keepalived,并且设为互为主从,实现高可用. 两台从节点部署nginx以及相关组件,作为真实服务器实现动态网站上线. 一.MASTER(BACKUP)节点下载keepa ...
- REST API (四)之Generic views
通用的视图 Django’s generic views... were developed as a shortcut for common usage patterns... 它们采取一些常见的习 ...
- Spring Boot-配置
Spring 官方完整文档:https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle Spring 官方配置文档:htt ...
- Chapter03 第三节 浮点数
3.3 浮点数 3.3.1 浮点数的表示 常规表示:12.34.0.01.8.0 E表示: 2.5e+8(2.5 10^8).7E6(7.0 10^6) (e大小写随意) (e+x或者E-x表示小数点 ...
- 20191112 Spring Boot官方文档学习(4.5-4.6)
4.5.国际化 Spring Boot支持本地化消息,因此您的应用程序可以迎合不同语言首选项的用户.默认情况下,Spring Boot messages在类路径的根目录下查找message resou ...
- 分享一个linux系统中循环遍历两个数组内容,并输出数组中的不同内容的shell脚本
cat diffarray.sh #!/bin/bash arry_list1=(1 2 3 4 5 6 7 8 9) arry_list2=(3 5 8) declare -a diff_list ...
- java8----Predicate接口的使用
//5.lambda表达式中加入Predicate // 甚至可以用and().or()和xor()逻辑函数来合并Predicate, // 例如要找到所有以J开始,长度为四个字母的名字,你可以合并两 ...
- zookeeper 分布式协调服务
分布式协调服务作用是将多机协调的职责从分布式应用中独立出来,以减少系统的耦合性和增加扩展性. 而zookeeper采用分布式中经典的主从架构:master->slave,通常以动态的存储分布式应 ...
- 防抖和节流 lodash插件
lodash.debounce lodash.debounce(function(){ },1000) 函数防抖原理 调用函数时,马上清理定时器.然后再设置一个定时器包含函数