1.简介

require.context是Webpack中用来管理依赖的一个函数,此方法会生成一个上下文模块,包含目录下所有模块的引用,通过正则表达式匹配,然后require进来

2.使用方法

require.context('.', false, /\.vue$/)

此方法有三个参数,

参数一:要查询的目录,上述代码指的是当前目录

参数二: 是否要查询子孙目录,方法默认的值为false

参数三:要匹配的文件的后缀,是一个正则表达式,上述我要查询的是.vue文件

require.context模块返回一个函数，这个函数可以接收一个参数

导出的方法有 3 个属性： resolve, keys, id。

resolve 是一个函数，它返回请求被解析后得到的模块 id。

keys 也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。

id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

3.应用场景

import Vue from 'vue'

let contexts = require.context('.', false, /\.vue$/)

contexts.keys().forEach(component => {

    // debugger;

    let componentEntity = contexts(component).default

    // 使用内置的组件名称 进行全局组件注册

    Vue.component(componentEntity.name, componentEntity)

})

获取图片文件

              var files = require.context("../../assets/image/pandaip/cartoon/", false, /.jpg$/).keys();

              var covers = require.context("../../assets/image/pandaip/cover/", false, /.png$/).keys();

上述代码中写的是一个全局注册的组件,用到了keys属性,返回一个数组,通过遍历,来完成组件注册,

contexts方法,内部就是返回引用webpack_require来加载模块,

使用componentEntity.name,来作为组件名,

即上述图片组件中的name,

文件目录

image.png

最后在main.js中引入index.js,该目录下的组件就全部被全局注册,可以在任意vue中使用这些组件,

注意

很多组件可能只是单个页面需要用到,我们在加载页面的过程中，希望组件也是按需加载的。组件全部注册，那么当页面需要引用其中某些组件时，是不是将所有的组件都打包引入了呢？全局注册的意思是不是已经全部被引入？

对于所有组件都在项目中被用到的情况来说，全局注册和按需引入的方式在打包和运行效率上并没有什么区别，只是相对来说按需引入可读性更强一点。

所以,大家可以根据自己的需求,合理使用