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中使用这些组件,
注意
很多组件可能只是单个页面需要用到,我们在加载页面的过程中，希望组件也是按需加载的。组件全部注册，那么当页面需要引用其中某些组件时，是不是将所有的组件都打包引入了呢？全局注册的意思是不是已经全部被引入？
对于所有组件都在项目中被用到的情况来说，全局注册和按需引入的方式在打包和运行效率上并没有什么区别，只是相对来说按需引入可读性更强一点。
所以,大家可以根据自己的需求,合理使用
