关于webpack require.context() 的那点事
先说
webpack里面有这么一招:使用require.context()方法来自动导入模块
官方文档有点深奥,老衲百度下拿了一段来直接使用,但是想看下它是如何运行的
本篇这里不会有太深入的研究,只是用一种解读方式更有助于理解它的原理
老衲使用的是随便vue项目的vuex改造来做例子
我们这里只研究require.context()怎么回事,不是讲解vuex怎么改造。
开始
先建这么个目录结构,里面2个模块:
模块里随便导出点东西,我们就用简单的对象:
在store.js中,然后我们抄了段代码是这样子的:
当然是先看输出结果,是这样子的:
这样,就成功读取了我们2个文件内导出的模块对象
研究
上面的代码可能有点玄乎,我们来改造下,拆解成最土的代码以便理解,比如这样子:
require.context()运行后,返回的是一个函数,把rcfn打印出来:
可以点击它(使用chrome),进入这个函数内部,看到这么些东西:
下面的模块向外暴露出webpackContext方法
这个方法有一个参数,返回了使用__webpack_require__方法加载的模块
并且webpackContext还有一个keys属性,是一个方法,返回了上面map对象的key
也就是我们上面例子调用时,modules目录下面的文件+路径名
所以很清楚了,代码中我们使用const moduleKeys = rcfn.keys(),来得到文件名数组:
新建一个空数组,遍历上面那个得到的文件名+路径数组,带入最开始require.context()返回的方法rcfn
上面提到,这个返回的方法,其实内部就是返回引用__webpack_require__来加载模块
这样,我们得到了modules数组,里面就是2个元素,每个元素里面有我们导出的默认模块
使用map过滤一下:
解散
总结 require.context() 用法就是 遍历目录下的文件名,再用文件名来加载文件中的模块。
关于webpack require.context() 的那点事的更多相关文章
- dva webpack 利用require.context加载多个model
dva redux数据管理都在models,根据业务不同models可能会有几十甚至上百的 [模块.js], 每次在index.js使用 app.model(require('./models/exa ...
- [Vue]webpack的require与require.context
1.require 1.1完整路径的require语句: require('tools'); //preset alias tools require('./js/main'); 1.2带表达式的 r ...
- 一张图带你了解webpack的require.context
很多人应该像我一样,对于webpack的require.context都是一知半解吧.网上很多关于require.context的使用案例,但是我没找到可以帮助我理解这个知识点的,于是也决定自己来探索 ...
- webpack的带表达式require和require.context()方法
带表达式的 require 语句如果 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入 ...
- require.context() 用于获取一个特定上下文的,webpack的一个api
参考链接: 1.https://www.jianshu.com/p/c894ea00dfec 2.https://www.jianshu.com/p/c894ea00dfec require.cont ...
- webpack中require.context 用法
1.require.context(directory, useSubdirectories = false, regExp = /^\.\//) Examples: require.context( ...
- webpack的require.context()实现路由“去中心化”管理
最近在开发一个大型vue单页面应用的时候,项目最初是将所有的路由写在一个router.js的文件里. const router = new Router({ mode: "history&q ...
- require.context('.', true, /\.router\.js/) webpack 编译的时候读取目录文件
const routerList = [] function importAll (r) { r.keys().map(value => { r(value).default.map(item ...
- webpack - require 概要
webpack 是一个预编译模块打包工具,它只会对使用到的模块进行打包. 一个模块是否被使用?可以根据该模块是否被 require 来判断.如果require时指定的是具体的模块名称与正确的路径,那么 ...
随机推荐
- python3.7 完美安装
在安装python3.7的过程中,我发现如果不加注意,pip3是无法被安装的.而这就不能算是完整安装python3了. 所以,我总结一下,如何完美安装python3.7. 依赖 yum insta ...
- linux的IO复用,select机制理解--ongoing
一:首先需要搞清楚IO复用.阻塞的概念: Ref: https://blog.csdn.net/u010366748/article/details/50944516 二:select机制 作为IO ...
- python-pillow图像处理模块
from PIL import ImageColor ImageColor.getcolor('red','RGB') #颜色 模式 ImageColor.getcolor('red','RGBA') ...
- Python开发【第五章】:常用模块
一.模块介绍: 1.模块定义 用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质上就是.py结尾python文件 分类:内置模块.开源模块.自定义模块 2.导入模块 本质:导 ...
- 2019杭电多校一 A. Blank (dp)
大意: 长为$n$的数组, 每个位置范围$[0,3]$, $m$个限制$(l,r,x)$表示$[l,r]$内有$x$种数, 求方案数. 维护每个数字最后一次出现位置, 暴力$DP$ 实现时有个技巧是把 ...
- BZOJ3879 SvT(后缀树+虚树)
对反串建SAM得到后缀树,两后缀的lcp就是其在后缀树上lca的len值,于是每次询问对后缀树建出虚树并统计答案即可. #include<iostream> #include<cst ...
- Bootstrap3 CDN 使用手册
一.一般功能 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel=" ...
- 数据结构-平衡二叉树Java实现
1,Node.java package com.cnblogs.mufasa.BalanceBinaryTree; public class Node { Node parent; Node left ...
- Django rest-framework框架-组件之视图
视图: a. django class Test(View): ... b. rest_framework class Test(APIView): ... c. GenericAPIView 一般不 ...
- zTree插件实现菜单树
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...