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的 ...
随机推荐
- Delphi XE2 之 FireMonkey 入门(41) - 控件基础: TListBox
Delphi XE2 之 FireMonkey 入门(41) - 控件基础: TListBox TScrollBox -> TCustomListBox -> TListBox; 其元素项 ...
- 函数传参和firture传参数request
前言 为了提高代码的复用性,我们在写用例的时候,会用到函数,然后不同的用例去调用这个函数.比如登录操作,大部分的用例都会先登录,那就需要把登录单独抽出来写个函数,其它用例全部的调用这个登陆函数就行.但 ...
- 获取当前操作的IFrame 对象的方法
分两种情况:第一种:获取iframe对象的JS函数在父页面上,如下 function getIframeByElement(element){ var iframe; $("iframe&q ...
- IDEA无法导入HttpServlet包解决方法
1.maven项目 直接在pom.xml中添加对java servlet api的依赖即可,比较常用的一个servlet版本3.1.0的依赖如下: <!-- https://mvnreposit ...
- Django 多数据库联用(同一个APP的models里不同class用不同数据库)
很多网站有多数据库联用的文章,如自强学堂http://code.ziqiangxuetang.com/django/django-multi-database.html 大都只讲解如何让不同的app对 ...
- 【ABAP系列】SAP ABAP 关于BAPI的EXTENSIONIN 一点解释
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 关于BAPI的 ...
- LeetCode算法题-Magic Squares In Grid(Java实现)
这是悦乐书的第326次更新,第349篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第196题(顺位题号是840).3 x 3魔方是一个3 x 3网格,填充了从1到9的不同 ...
- Web高效管理多个项目的SVN仓库
转至:https://www.jianshu.com/p/a0af00642585 采用方案 Linux+Apache+Subversion+MySQL+JDK+Tomcat+Svnadmin 目录 ...
- 关于Polyaxon的使用
1.首先upload代码 polyaxon upload 注意,upload只能在新建notebook前进行,且每次只能upload一次,所以在结束每次项目测试(开发)前,都应该在Polyaxon上修 ...
- c++ const 用法
1. 修饰一般变量,const int a = 10; 表示此变量不能被修改,简单易懂,不多说 2. 修饰指针,主要是下面三种 const int *cp1 = &a; // ...