Webpack 依賴管理

es6 modules

commonjs

amd

帶表達(dá)式的 require 語句

如果你的 request 含有表達(dá)式(expressions)，就會創(chuàng)建一個(gè)上下文(context)，因?yàn)樵诰幾g時(shí)(compile time)并不清楚 具體 導(dǎo)入哪個(gè)模塊。

示例，考慮到我們有包含 ?.ejs? 文件的如下目錄結(jié)構(gòu)：

example_directory
│
└───template
│   │   table.ejs
│   │   table-row.ejs
│   │
│   └───directory
│       │   another.ejs

當(dāng)臺下的 require() 調(diào)用被評估解析：

require('./template/' + name + '.ejs');

webpack 解析 ?require()? 調(diào)用，然后提取出如下一些信息：

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

context module

會生成一個(gè) context module(上下文模塊)。它包含 目錄下的所有模塊 的引用，如果一個(gè) request 符合正則表達(dá)式，就能 require 進(jìn)來。該 context module 包含一個(gè) map（映射）對象，會把 requests 翻譯成對應(yīng)的模塊 id。

示例 map（映射）:

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

此 context module 還包含一些訪問這個(gè) map 對象的 runtime 邏輯。

這意味著 webpack 能夠支持動態(tài)地 require，但會導(dǎo)致所有可能用到的模塊都包含在 bundle 中。

require.context

你還可以通過 ?require.context()? 函數(shù)來創(chuàng)建自己的 context。

可以給這個(gè)函數(shù)傳入三個(gè)參數(shù)：一個(gè)要搜索的目錄，一個(gè)標(biāo)記表示是否還搜索其子目錄， 以及一個(gè)匹配文件的正則表達(dá)式。

Webpack 會在構(gòu)建中解析代碼中的 ?require.context()? 。

語法如下：

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

示例：

require.context('./test', false, /\.test\.js$/);
//（創(chuàng)建出）一個(gè) context，其中文件來自 test 目錄，request 以 `.test.js` 結(jié)尾。

require.context('../', true, /\.stories\.js$/);
// （創(chuàng)建出）一個(gè) context，其中所有文件都來自父文件夾及其所有子級文件夾，request 以 `.stories.js` 結(jié)尾。

context module API

一個(gè) context module 會導(dǎo)出一個(gè)（require）函數(shù)，此函數(shù)可以接收一個(gè)參數(shù)：request。

此導(dǎo)出函數(shù)有三個(gè)屬性：resolve, keys, id。

• ?resolve? 是一個(gè)函數(shù)，它返回 request 被解析后得到的模塊 id。
• ?keys? 也是一個(gè)函數(shù)，它返回一個(gè)數(shù)組，由所有可能被此 context module 處理的請求（參考下面第二段代碼中的 key）組成。

如果想引入一個(gè)文件夾下面的所有文件，或者引入能匹配一個(gè)正則表達(dá)式的所有文件，這個(gè)功能就會很有幫助，例如：

function importAll(r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /\.js$/));

const cache = {};

function importAll(r) {
  r.keys().forEach((key) => (cache[key] = r(key)));
}

importAll(require.context('../components/', true, /\.js$/));
// 在構(gòu)建時(shí)(build-time)，所有被 require 的模塊都會被填充到 cache 對象中。

• id 是 context module 的模塊 id. 它可能在你使用 ?module.hot.accept? 時(shí)會用到。