最近專案中用到了vue-element-admin當作框架，當中有一個很好的例子：封裝了一個svg的元件，其中就是用到了require.context，然後就出查了相關的介紹，當時也是一頭霧水，最後決定弄明白這個東西。

  | 看下webpack官方的介紹：

require.context 點選開啟連結

You can create your own context with the require.context() function.

It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.

webpack parses for require.context() in the code while building.

The syntax is as follows:

require.context(directory, useSubdirectories = false, regExp = /^\.\//)

Examples:

require.context("./test", false, /\.test\.js$/);
// a context with files from the test directory that can be required with a request endings with `.test.js`.
 

require.context("../", true, /\.stories\.js$/);
// a context with all files in the parent folder and descending folders ending with `.stories.js

    啥意思呢，就是說啊，這玩意的目的啊就是為了省事，通常我們可能會在多個頁面require 同一個元件，數量少還行，多了的話就很蠻煩，維護起來也費勁。這個時候require.context 就排上用場了，一次性引入。

   | 首先介紹下入參 ：

        1. 你要引入檔案的目錄

        2.是否要查詢該目錄下的子級目錄

        3.匹配要引入的檔案

   | 返回的：

       1. context.require 返回一個require 函式：

function webpackContext(req) {
	return __webpack_require__(webpackContextResolve(req));
}

    2. 改函式有三個屬性：resolve 、keys、id

        · resolve: 是一個函式，他返回的是被解析模組的id

        · keys: 也是一個函式，他返回的是一個數組，該陣列是由所有可能被上下文模組解析的請求物件組成

        · id：上下文模組的id

    | 用法：

拿該目錄為例

           要引入svg下面所有的svg檔案：

            在該檔案（icons）目錄下新建一個js檔案index.js 寫如下程式碼：

let requireAll = requireContext => requireContext.keys().map(requireContext)
let req = require.context('./svg', false, /\.svg$/)
requireAll(req)