require.context是webpack中，用來創(chuàng)建自己的（模塊）上下文
webpack 會(huì)在打包構(gòu)建代碼中解析它
require.context接收三個(gè)參數(shù)：
- 要搜索的文件夾目錄
- 是否搜索它的子目錄
- 以及一個(gè)匹配文件的正則表達(dá)式
require.context('../views/components', true, /\.vue/)
在我們項(xiàng)目中，有很多自定義的全局組件，使用這個(gè)將會(huì)非常方便，下面舉例說明
image
我這里只寫了兩個(gè)，當(dāng)我們有一百個(gè)的時(shí)候，如果手動(dòng)全局引入。。。
image
這將是慘不忍睹的
所以，投機(jī)取巧的我們，利用了 require.context
import Vue from 'vue'
// 自定義組件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印結(jié)果
// 遍歷出每個(gè)組件的路徑
requireComponents.keys().forEach(fileName => {
// 組件實(shí)例
const reqCom = requireComponents(fileName)
// 截取路徑作為組件名
const reqComName = fileName.split('/')[1]
// 組件掛載
Vue.component(reqComName, reqCom.default || reqCom)
})
一段話搞定一整個(gè)文件夾的組件，是否很方便
