require.context()

require.context()

用法：

接受三個參數（require.context(directory,useSubdirectories,regExp)）

directory：說明需要檢索的目錄
useSubdirectories：是否檢索子目錄
regExp: 匹配文件的正則表達式,一般是文件名

返回參數

require.context返回一個require 函數，此函數可以接收一個參數

返回的函數：function webpackContext(req) {return __webpack_require__(webpackContextResolve(req))};

函數有三個屬性：resolve 、keys、id

        · resolve: 是一個函數，他返回的是被解析模塊的id ，接受一個參數request。

        · keys: 也是一個函數，他返回的是一個數組，該數組是由所有可能被上下文模塊解析的請求對象組成

        · id：上下文模塊的id

應用場景：

如果頁面需要導入多個組件時，一般的寫法

import aaa from '@/components/login/aaa'
import bbb from '@/components/login/bbb'
import ccc from '@/components/login/ccc'
import ddd from '@/components/login/ddd'
components:{
    aaa,
    bbb,
    ccc,
    ddd,
}

此時可以看出代碼重複量很大

使用require.context()時的寫法就簡潔了許多

const path = require('path')
const files = require.context('@/components/login', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue') // 提取出用 ‘/' 隔開的path的最後一部分,path.basename(p, [ext])。 p要處理的path,ext要過濾的字符
  modules[name] = files(key).default || files(key)
})
components:modules　

files此時是一個函數

files.keys()屬性方法執行後會返回一個數組：["./aaa.vue", "./bbb.vue", "./ccc.vue", "./ddd.vue"]

files.resolve('./aaa.vue')屬性方法傳入一個login文件下的相對路徑('./aaa.vue')會返回匹配到的文件的絕對路徑("./src/components/login/aaa.vue")