先说

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() 的那点事的更多相关文章

  1. dva webpack 利用require.context加载多个model

    dva redux数据管理都在models,根据业务不同models可能会有几十甚至上百的 [模块.js], 每次在index.js使用 app.model(require('./models/exa ...

  2. [Vue]webpack的require与require.context

    1.require 1.1完整路径的require语句: require('tools'); //preset alias tools require('./js/main'); 1.2带表达式的 r ...

  3. 一张图带你了解webpack的require.context

    很多人应该像我一样,对于webpack的require.context都是一知半解吧.网上很多关于require.context的使用案例,但是我没找到可以帮助我理解这个知识点的,于是也决定自己来探索 ...

  4. webpack的带表达式require和require.context()方法

    带表达式的 require 语句如果 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入 ...

  5. require.context() 用于获取一个特定上下文的,webpack的一个api

    参考链接: 1.https://www.jianshu.com/p/c894ea00dfec 2.https://www.jianshu.com/p/c894ea00dfec require.cont ...

  6. webpack中require.context 用法

    1.require.context(directory, useSubdirectories = false, regExp = /^\.\//) Examples: require.context( ...

  7. webpack的require.context()实现路由“去中心化”管理

    最近在开发一个大型vue单页面应用的时候,项目最初是将所有的路由写在一个router.js的文件里. const router = new Router({ mode: "history&q ...

  8. require.context('.', true, /\.router\.js/) webpack 编译的时候读取目录文件

    const routerList = [] function importAll (r) { r.keys().map(value => { r(value).default.map(item ...

  9. webpack - require 概要

    webpack 是一个预编译模块打包工具,它只会对使用到的模块进行打包. 一个模块是否被使用?可以根据该模块是否被 require 来判断.如果require时指定的是具体的模块名称与正确的路径,那么 ...

随机推荐

  1. python3.7 完美安装

    在安装python3.7的过程中,我发现如果不加注意,pip3是无法被安装的.而这就不能算是完整安装python3了. 所以,我总结一下,如何完美安装python3.7.   依赖 yum insta ...

  2. linux的IO复用,select机制理解--ongoing

    一:首先需要搞清楚IO复用.阻塞的概念: Ref:  https://blog.csdn.net/u010366748/article/details/50944516 二:select机制 作为IO ...

  3. python-pillow图像处理模块

    from PIL import ImageColor ImageColor.getcolor('red','RGB') #颜色 模式 ImageColor.getcolor('red','RGBA') ...

  4. Python开发【第五章】:常用模块

    一.模块介绍: 1.模块定义 用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质上就是.py结尾python文件 分类:内置模块.开源模块.自定义模块 2.导入模块 本质:导 ...

  5. 2019杭电多校一 A. Blank (dp)

    大意: 长为$n$的数组, 每个位置范围$[0,3]$, $m$个限制$(l,r,x)$表示$[l,r]$内有$x$种数, 求方案数. 维护每个数字最后一次出现位置, 暴力$DP$ 实现时有个技巧是把 ...

  6. BZOJ3879 SvT(后缀树+虚树)

    对反串建SAM得到后缀树,两后缀的lcp就是其在后缀树上lca的len值,于是每次询问对后缀树建出虚树并统计答案即可. #include<iostream> #include<cst ...

  7. Bootstrap3 CDN 使用手册

    一.一般功能 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel=" ...

  8. 数据结构-平衡二叉树Java实现

    1,Node.java package com.cnblogs.mufasa.BalanceBinaryTree; public class Node { Node parent; Node left ...

  9. Django rest-framework框架-组件之视图

    视图: a. django class Test(View): ... b. rest_framework class Test(APIView): ... c. GenericAPIView 一般不 ...

  10. zTree插件实现菜单树

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...