模組變數

本節涵蓋所有使用 webpack 編譯的程式碼中可用的變數。模組將透過 module 和其他變數存取編譯程式的特定資料。

module.loaded (NodeJS)

如果模組目前正在執行，則為 false；如果同步執行已完成，則為 true。

module.hot (webpack 專屬)

表示是否已啟用熱模組替換，並提供一個處理程式的介面。有關詳細資訊，請參閱HMR API 頁面。

module.id (CommonJS)

目前模組的 ID。

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

module.exports (CommonJS)

定義當消費者對模組執行 require 呼叫時將回傳的值（預設為新的物件）。

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

exports (CommonJS)

此變數等於 module.exports 的預設值（即物件）。如果 module.exports 被覆寫，exports 將不再被匯出。

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

global (NodeJS)

請參閱 node.js global。

出於相容性考量，webpack 預設會填充 global 變數。

__dirname (NodeJS)

根據設定選項 node.__dirname

• false：未定義
• mock：等於 '/'
• true： node.js __dirname

如果在由 Parser 解析的表達式中使用，設定選項將視為 true。

import.meta

import.meta 會向 JavaScript 模組公開特定於內容的元資料，例如模組的 URL。它僅在 ESM 中可用。

請注意，webpack 不支援直接存取 import.meta。相反地，您應該存取其屬性或使用解構賦值。例如，

// webpack will warn about this
Object.keys(import.meta);

// fine to use
console.log(import.meta.url);
const { url } = import.meta;

import.meta.url

傳回模組的絕對 file: URL。

src/index.js

console.log(import.meta.url); // output something like `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 的別名，但 import.meta.webpackHot 可用於 嚴格 ESM，而 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

• false：未定義
• mock：等於 '/index.js'
• true：node.js __filename

如果在由 Parser 解析的表達式中使用，設定選項將視為 true。

__resourceQuery (webpack 專用)

目前模組的資源查詢。如果進行以下 require 呼叫，則查詢字串會在 file.js 中可用。

require('file.js?test');

file.js

__resourceQuery === '?test';

__webpack_public_path__ (webpack 專用)

等於組態選項的 output.publicPath。

__webpack_require__ (webpack 專用)

原始 require 函式。Parser 不會剖析此表達式以取得依賴項。

__webpack_chunk_load__ (webpack 專用)

內部區塊載入函式。接收一個引數

• chunkId 要載入的區塊 ID。

範例：當一個區塊載入失敗時，從備用公開路徑載入區塊

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 專用)

它提供存取目前的 module。module 在嚴格的 ESM 中不可用。

__webpack_module__.id (webpack 特定)

它提供存取目前 module 的 ID (module.id)。module 在嚴格的 ESM 中不可用。

__webpack_modules__ (webpack 特定)

存取所有模組的內部物件。

__webpack_hash__ (webpack 特定)

它提供存取編譯的雜湊。

__webpack_get_script_filename__ (webpack 特定)

函式 (chunkId)

它提供區塊的檔名，依據其 ID。

它可指派，允許變更執行階段使用的檔名。例如，它可用於在載入區塊時決定最終路徑。

const oldFn = __webpack_get_script_filename__;

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

__non_webpack_require__ (webpack 特定)

產生一個未經 webpack 解析的 require 函式。可用於對全域 require 函式執行很酷的操作（如果可用）。

__webpack_exports_info__ (webpack 特定)

在模組中，__webpack_exports_info__ 可用於允許匯出內省

• __webpack_exports_info__ 永遠是 true

• 當已知匯出未使用時，__webpack_exports_info__.<exportName>.used 為 false，否則為 true

• __webpack_exports_info__.<exportName>.useInfo 是

  • 當已知輸出未被使用時為 false
  • 當已知輸出已使用時為 true
  • 當輸出使用情況可能取決於執行時期條件時為 null
  • 當沒有可用資訊時為 undefined

• __webpack_exports_info__.<exportName>.provideInfo 是

  • 當已知輸出未提供時為 false
  • 當已知輸出已提供時為 true
  • 當輸出提供情況可能取決於執行時期條件時為 null
  • 當沒有可用資訊時為 undefined

• 可以存取巢狀輸出的資訊：例如 __webpack_exports_info__.<exportName>.<exportName>.<exportName>.used

• 使用 __webpack_exports_info__.<name>.canMangle 檢查輸出是否可以混淆

__webpack_is_included__ (webpack 專屬)

測試 webpack 是否已將給定的模組打包。

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

__webpack_base_uri__ (webpack 專屬)

在執行時期變更基本 URI。

• 類型：字串

• 可用：5.21.0+

• 範例

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

__webpack_runtime_id__

存取目前輸入項目的執行時期 ID。

這是 webpack 專屬功能，且自 webpack 5.25.0 起可用。

src/index.js

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

DEBUG (webpack 專屬)

等於組態選項 debug。