webpack會在構建的時候解析代碼中的require.context()
require.context函數接收三個參數：
.要搜索的文件夾目錄
.是否還應該搜索它的子目錄
.以及一個匹配文件的正則表達式
// 語法
require.context(directory, useSubdirectories = false, regExp = /^\.\//);
// 示例
require.context('./test', false, /\.test\.js$/);
// （創建了）一個包含了 test 文件夾（不包含子目錄）下面的、所有文件名以 `.test.js` 結尾的、能被 require 請求到的文件的上下文。
我們來結合一個例子看一下：
let files = require.context('@/assets/mdcImgs', false, /\.png$/);
文件目錄結構如下：
好不好奇上面的files究竟是個什么東西呢？有圖有真相，我們打印一下：
files可以看到，是一個函數，意思就是說，require.context模塊導出（返回）一個（require）函數。
這個函數有三個屬性（沒錯又是3個，別忘了，函數也是對象，所以也是有屬性的）：
resolve：是一個函數，它返回請求被解析后得到的模塊 id。
keys：也是一個函數，它返回一個數組，由所有可能被上下文模塊處理的請求組成。
id：是上下文模塊里面所包含的模塊 id. 它可能在你使用 module.hot.accept 的時候被用到
而且這個函數接收一個參數，一圖勝千言:
這個展示了webpack解析后的形成結果。可以看到，firequire.context()這個函數返回上下文模塊就上面。
上面也展示了files函數的三個屬性是分別怎樣形成的，files對應的就是上面的webpackContext。
我們試着調用一下files.keys()
（下圖僅參考數據格式，保密起見，未截取真實數據）
返回一個數組，從上面的keys方法就可以看到，合理對應當前結果。
在vue中，我們對於一些基礎組件，可以使用require.context()函數來創建上下文模塊，然后進行全局注冊組件，記住全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創建之前發生。具體查看vue官方示例基礎組件的自動化全局注冊