這篇文章帶給大家的內容是關於require.context的用法介紹（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
起因：為什麼會突然用到webpack這個管理特性呢？
專案某個頁面需要引入N張demo圖片。即資源的批次引入：如果要引入10 個以上的圖片資源，就需要寫10 個如下的引入代碼：import XXX from 'relative/path/assets/imgs/xxx';，那如果再多一點的靜態資源需要引入呢？這時候require.context就派上用場了。
文件
官方文件的介紹先放在這裡，可小覷一下，了解使用姿勢。
栗子來一個
話不多說，針對上面的場景，我們上一下程式碼吧。
場景需要我們引入某個指定資料夾下的所有webp格式的圖片，在點擊demo1的時候展示demo1下的x張案例圖，在點擊demoX的時候展示demoX下的x張案例圖。
// 通过require.context的方式引入指定的路径下匹配到的模块引用
const demoImgsContext = require.context('@src/assets/imgs/demo', false, /\.webp$/);
...
// 使用姿势
trigger(type) {
this.demoImgs = Arry.from({length: config.type}, (key, value) => value + 1)
.map(index => demoImgsContext(`./${type}_demo${index}.webp`));
}舉一反三的場景還有需要的麼？
例如vuex引進多個module的store。也可以使用這個方法。
// 添加module文件是，文件命请按照module_XXX的方式命名
// 自动引入module文件夹下的js文件
const mutationContext = require.context('./module', false, /.*\.js/);
const modules = mutationContext.keys().reduce((prev, cur) => {
// 排除module_root文件
const matches = cur.match(/module_(?!.*root)(\w+)\.js/);
const key = matches && matches[1];
key && (prev[key] = mutationContext(cur).default);
return prev;
}, {});接下來，讓我們來看看，require.context是如何做到動態引入資源的呢？
看下打包後的dist目錄下，我們的靜態圖片案例chunk這個部分的程式碼是啥樣的。
trigger方法中引用模組資源的程式碼如下，對y方法進行調用，傳入了一個資源的路徑。
map(function (e) {
return y("./".concat(t, "_demo").concat(e, ".webp"))
})那y方法是什麼呢？順藤摸瓜，繼續看打包後的程式碼。
y = a("ae36");y方法是某個模組的export，繼續看這個id下的模組程式碼：
ae36: function (t, e, a) {
// 此处是一个map映射，key值和真正的资源id的映射
var i = {
"./a_module_demo1.webp": "6085",
"./a_module_demo2.webp": "fd3b",
"./b_module_demo1.webp": "cbf6",
"./b_module_demo2.webp": "220e",
"./c_module_demo1.webp": "273e",
"./c_module_demo2.webp": "5a5e",
"./d_module_demo1.webp": "75b0",
"./d_module_demo2.webp": "2d3e"
};
// 此处根据module的id值，真正require一个资源
function r(t) {
var e = o(t);
return a(e)
}
function o(t) {
var e = i[t];
if (!(e + 1)) {
var a = new Error("Cannot find module '" + t + "'");
throw a.code = "MODULE_NOT_FOUND", a
}
return e
}
r.keys = function () {
return Object.keys(i)
}, r.resolve = o, t.exports = r, r.id = "ae36"
},"6085"，"fd3b"等map對應的value值可想而知，是真正的資源id值，其對應的模組對應如下：
6085: function (t, e) {
t.exports =
"//${你配置的项目publicPath}/img/1_module_demo1.ed6db768.webp"
},當使用者觸發trigger方法時，根據type和index指定的值，require.context儲存的模組資源參考會根據key值找到真正的資源模組，進行require，瀏覽器會幫助我們下載對應的資源，做到了批量引入後按需加載的想法。
這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript影片教學專欄！
#以上是require.context的用法介紹（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
