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;