1.問題描述

不知道小夥伴們有沒有在註冊全域性元件的時候不斷的import,十分想寫個迴圈將公共元件註冊，require.context()函式就是能滿足這個願望

2.require.context()是什麼

是一個webpack的API,當我們想從一個資料夾下引入多個檔案的時候，就可以使用它，它會自動的遍歷指定資料夾下的指定檔案

3.如何使用require.context()

require.context()函式接收三個引數

const files = require.context('@/components', true, /index\.vue$/)

第一個引數：指定遍歷的資料夾路徑
第二個引數：

4.require.context()的返回值

require.context()函式執行後返回的是一個函式，此函式具有三個屬性

• resolve
  接受一個引數request,request為test資料夾下面匹配檔案的相對路徑,返回這個匹配檔案相對於整個工程的相對路徑
• keys
  返回匹配成功檔案的相對路徑組成的陣列
• id
  執行環境的id,返回的是一個字串

示例：

1. 檔案目錄
   

2. 遍歷components資料夾子目錄下的index.vue檔案，並將元件掛載到Vue上
   

3. 控制檯輸出
   
   

4. main.js資料夾下引入