webpack 依賴管理

webpack 依賴管理

webpack是一個模塊管理器,能夠管理模塊的依賴關係，併產生能夠替代這些模塊的靜態代碼

帶表達式的 require 語句

若是你的 request 含有表達式(expressions)，會建立一個上下文(context)，由於在編譯時(compile time)並不清楚具體是哪個模塊被導入。 示例： require("./template/" + name + ".ejs");

• webpack 解析 require() 的調用，提取出來以下這些信息：

Directory: ./template
Regular expression: /^.*\.ejs$/

• 具備上下文的模塊

（譯者注：這裏的 request 應該是指在 require() 語句中的表達式，如 "./template/" + name + ".ejs"）生成一個具備上下文的模塊。它包含目錄下的全部模塊的引用(reference)，這些模塊可以「經過從 request 匹配出來的正則表達式」所 require 進來。上下文模塊包含一個 map 對象，會把 request 中全部模塊轉譯成對應的模塊 id。

• 示例：

{
    "./table.ejs": 42,
    "./table-row.ejs": 43,
    "./directory/folder.ejs": 44
}

上下文模塊還包含一些運行時(runtime)邏輯來訪問這個 map 對象。 這意味着 webpack 可以支持動態 require，但會致使全部可能用到的模塊都包含在 bundle 中。

require.context 返回的一個

你還能夠使用 require.context() 方法來建立本身的（模塊）上下文。

你能夠給這個方法傳 3 個參數：要搜索的文件夾目錄，是否還應該搜索它的子目錄，以及一個匹配文件的正則表達式。 webpack 會在構建的時候解析代碼中的 require.context() 。

• 語法以下：

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

• 示例：

require.context('./pages/', true, /\.js$/)

傳遞給 require.context 的參數必須是字面量(literal)！

上下文模塊 API

一個上下文模塊導出一個（require）函數，這個函數能夠接收一個參數：request。 導出的方法有 3 個屬性： resolve, keys, id。

• resolve 是一個函數，它返回請求被解析後獲得的模塊 id。
• keys 也是一個函數，它返回一個數組，由全部可能被上下文模塊處理的請求。

上下文模塊源碼以下

var map = {
	"./Home/index.js": "./src/pages/Home/index.js",
	"./Layout/Head/index.js": "./src/pages/Layout/Head/index.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);
};
webpackContext.resolve = webpackContextResolve;
webpackContext.id = "./src/pages sync recursive \\.js$";

module.exports = webpackContext;