Webpack：模塊變量

本章節(jié)涵蓋了使用 webpack 編譯的代碼中所有的變量。模塊將通過(guò) module 和其他變量，來(lái)訪問(wèn)編譯過(guò)程中的某些數(shù)據(jù)。

module.loaded (NodeJS)

false 表示該模塊正在執(zhí)行， true 表示同步執(zhí)行已經(jīng)完成。

module.hot (webpack-specific)

表示 模塊熱替換(Hot Module Replacement) 是否啟用，并給進(jìn)程提供一個(gè)接口。詳細(xì)說(shuō)明請(qǐng)查看 模塊熱替換 API 頁(yè)面。

module.id (CommonJS)

當(dāng)前模塊的 ID。

module.id === require.resolve('./file.js');

module.exports (CommonJS)

調(diào)用者通過(guò) require 對(duì)模塊進(jìn)行調(diào)用時(shí)返回的值（默認(rèn)為一個(gè)新對(duì)象）。

module.exports = function doSomething() {
  // Do something...
};

exports (CommonJS)

該變量默認(rèn)值為 module.exports（即一個(gè)對(duì)象）。 如果 module.exports 被重寫的話， exports 不再會(huì)被導(dǎo)出。

exports.someValue = 42;
exports.anObject = {
  x: 123,
};
exports.aFunction = function doSomething() {
  // Do something
};

global (NodeJS)

見(jiàn) node.js global.

出于兼容性考慮，webpack 默認(rèn)填充了 global 變量。

__dirname (NodeJS)

取決于 node.__dirname 配置選項(xiàng)：

• false: 未定義
• mock: 等同于 '/'
• true: node.js __dirname

如果在一個(gè)被 Parser 解析的表達(dá)式內(nèi)部使用，則配置選項(xiàng)會(huì)被當(dāng)作 true 處理。

import.meta.url

返回模塊以 file: 開頭絕對(duì)路徑的 URL。

src/index.js

console.log(import.meta.url); // 輸出結(jié)果類似于 `file:///path/to/your/project/src/index.js`

import.meta.webpack

返回 webpack 的版本

src/index.js

console.log(import.meta.webpack); // output `5` for webpack 5

import.meta.webpackHot

webpack 特定。?module.hot? 的一個(gè)別名，strict ESM 中可以使用 ?import.meta.webpackHot? 但是不能使用 ?module.hot?。

import.meta.webpackContext

返回與 ?require.context? 一樣的值，但是僅用于 ?javascript/auto? 和? javascript/esm?。

• 類型：

(
  request: string,
  options?: {
    recursive?: boolean;
    regExp?: RegExp;
    include?: RegExp;
    exclude?: RegExp;
    preload?: boolean | number;
    prefetch?: boolean | number;
    chunkName?: string;
    exports?: string | string[][];
    mode?: 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once';
  }
) => webpack.Context;

• 可用版本：5.70.0+
• 示例：

const contextRequire = import.meta.webpackContext('.', {
  recursive: false,
  regExp: /two/,
  mode: 'weak',
  exclude: /three/,
});

__filename (NodeJS)

取決于 ?node.__filename? 配置選項(xiàng)：

• false: 未定義
• mock: 等同于 ?'/index.js'?
• true: ?node.js __filename?

如果在一個(gè)被 Parser 解析的表達(dá)式內(nèi)部使用，則配置選項(xiàng)會(huì)被當(dāng)作 true 處理。

__resourceQuery (webpack-specific)

當(dāng)前模塊的資源查詢(resource query) 。如果進(jìn)行了如下的 reqiure 調(diào)用，那么查詢字符串(query string)在?file.js? 中可訪問(wèn)。

require('file.js?test');

file.js

__resourceQuery === '?test';

__webpack_public_path__ (webpack-specific)

等同于 ?output.publicPath? 配置選項(xiàng)。

__webpack_require__ (webpack-specific)

原始 require 函數(shù)。這個(gè)表達(dá)式不會(huì)被解析器解析為依賴。

__webpack_chunk_load__ (webpack-specific)

內(nèi)部 chunk 載入函數(shù)，有一個(gè)輸入?yún)?shù)：

• chunkId 需要載入的 chunk id。

當(dāng)一個(gè) chunk 加載失敗時(shí)，從備用公共路徑加載 chunk 的示例：

const originalLoad = __webpack_chunk_load__;
const publicPaths = ['a', 'b', 'c'];
__webpack_chunk_load__ = async (id) => {
  let error;
  for (const path of publicPaths) {
    __webpack_public_path__ = path;
    try {
      return await originalLoad(id);
    } catch (e) {
      error = e;
    }
  }
  throw error;
};
import('./module-a').then((moduleA) => {
  // now webpack will use the custom __webpack_chunk_load__ to load chunk
});

__webpack_module__ (webpack-specific)

5.68.0+

它提供對(duì)當(dāng)前 ?module? 的訪問(wèn)。?module? 在 ESM 嚴(yán)格模式下不可用。

__webpack_module__.id (webpack-specific)

5.68.0+

它提供對(duì)當(dāng)前 ?module(module.id)? ID 的訪問(wèn)。?module? 在 ESM 嚴(yán)格模式下不可用。

__webpack_modules__ (webpack-specific)

訪問(wèn)所有模塊的內(nèi)部對(duì)象。

__webpack_hash__ (webpack-specific)

這個(gè)變量提供對(duì)編譯過(guò)程中(compilation)的 hash 信息的訪問(wèn)。

__webpack_get_script_filename__ (webpack-specific)

?function (chunkId)?

它通過(guò) chunk 的 id 提供 chunk 的文件名。

它是可分配的，允許更改運(yùn)行時(shí)使用的文件名。例如，它可以用來(lái)確定加載 chunk 時(shí)的最終路徑。

const oldFn = __webpack_get_script_filename__;

__webpack_get_script_filename__ = (chunkId) => {
  const filename = oldFn(chunkId);
  return filename + '.changed';
};

__non_webpack_require__ (webpack-specific)

生成一個(gè)不會(huì)被 webpack 解析的 require 函數(shù)。配合全局可以獲取到的 require 函數(shù)，可以完成一些酷炫操作。

__webpack_exports_info__ (webpack-specific)

在模塊中, ?__webpack_exports_info__? 可以被獲取到，以便導(dǎo)出模塊用以自我檢查：

1. ?__webpack_exports_info__? 總是 true
2. 當(dāng)導(dǎo)出模塊未被使用時(shí) ??__webpack_exports_info__?.?<exportName>.used?? 為 false, 否則是 true
3. ??__webpack_exports_info__?.?<exportName>.useInfo?? 是 

• false 當(dāng)導(dǎo)出模塊未被使用
• true 當(dāng)導(dǎo)出模塊被使用 
• null 當(dāng)導(dǎo)出模塊的使用情況取決于運(yùn)行時(shí)的條件 
• undefined 當(dāng)沒(méi)有可用信息時(shí)

?    4. ?__webpack_exports_info__?.?<exportName>.provideInfo?是

• false 當(dāng)導(dǎo)出模塊沒(méi)有被提供
• true 當(dāng)導(dǎo)出模塊被提供
• null 當(dāng)導(dǎo)出模塊的提供情況取決于運(yùn)行時(shí)的條件
• undefined 當(dāng)沒(méi)有可用信息時(shí)

    5. 可以從嵌套的 exports 中得到相關(guān)信息: 例如?__webpack_exports_info__.<exportName>.<exportName>.<exportName>.used????

    6. Check whether exports can be mangled with ?__webpack_exports_info__.<name>.canMangle?

__webpack_is_included__ (webpack-specific)

5.16.0+

測(cè)試給定的模塊是否被 webpack 打包。

if (__webpack_is_included__('./module-a.js')) {
  // do something
}

__webpack_base_uri__ (webpack-specific)

運(yùn)行時(shí)修改 base 的 URI。

• 類型：string
• 可用：5.21.0+
• 示例:

  __webpack_base_uri__ = 'https://example.com';

__webpack_runtime_id__

訪問(wèn)當(dāng)前入口的 runtime id。

這是一個(gè) webpack 特性，并且在 webpack 5.25.0 后可用。

src/index.js

console.log(__webpack_runtime_id__ === 'main');

DEBUG (webpack-specific)

等同于 debug 配置選項(xiàng)。

Further Reading

• CommonJS
• Asynchronous Module Definition