技術標籤：Webpack知識庫jswebpackrequire.context前端keys

大家好，都吃晚飯了嗎？我是Kaiqisan,是一個已經走出社恐的一般生徒,下面講的內容
只有在webpack才可以使用的方法，如果在node環境或者直接編寫的話是行不通的，直接給你報錯

它的格式如下

require.context(dir, useSubdirectories, filter)

第一個引數填寫資料夾路徑，注意，這裡不能填寫具體的檔案，否則報錯

第二個引數填寫是否查詢子路徑的檔案，為布林值，如果選擇是，如果這個資料夾下還有其他資料夾的話它也會進入子資料夾找出匹配的檔案。（樹查詢）

第三個引數是過濾器，需要填入正則表示式代表檔名的匹配規則，一般通過副檔名來篩選檔案

例

上圖是我自己手搭的webpack的原生js專案，它由一個入口檔案index.js和兩個子檔案組成 demo1.js demo2.js
然後入口檔案要匯入兩個子檔案的內容

/* demo.js */
export default {
    name: 'kitty'
}

/* demo2.js */
export default {
    name: 'kaiqisan'
}

/* index.js */
let a = require.context('./js', true, /\.js$/)
console.
 
log()

在控制欄裡面雖然沒有直接返回給我們內容，只輸出了一個function,

但這只是內容的一部分，雙擊程式碼這部分就可以進入原始檔了，原始檔裡面才是奧祕，建議讀懂

// 讀取到的檔名和路徑
var map = {
	"./demo.js": "./src/js/demo.js",
	"./demo2.js": "./src/js/demo2.js"
};


// 直接執行可獲取相應具體檔案的內容
function webpackContext(req) {
	var id = webpackContextResolve(req)
 
;
	return __webpack_require__(id);
}

function webpackContextResolve(req) {
	if(!__webpack_require__.o(map, req)) {
		var e = new Error("Cannot find module '" + req + "'");
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	}
	return map[req];
}
webpackContext.keys = function webpackContextKeys() {
	return Object.keys(map); // 迭代map裡面的內容，獲取每一個鍵值
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext; // 輸出
webpackContext.id = "./src/js sync recursive \\.js$";

我們可以看到這個方法最終輸入了 webpackContext,它是一個函式。

然後我們來測試一下

測試keys函式

let a = require.context('./js', true, /\.js$/)

a.keys().forEach(item => {
    console.log(item);
})

輸出為

./demo.js
./demo2.js

測試直接執行webpackContext

let a = require.context('./js', true, /\.js$/)

a.keys().forEach(item => {
    console.log(a(item));
})

輸出為一個物件Module,這 default裡面就是我們想要的檔案內容

能獲取到每一個檔案的內容，那麼我就不困了