模組變數#

CommonJs#

module.loaded#

false 表示模組正在執行，true 表示同步執行已完成。

module.id#

目前的模組 ID。

module.id === require.resolve('./src/main.js'); // true

module.hot#

指示是否啟用熱模組替換並提供與該過程的介面。詳情請參閱 HMR API 頁面。

global#

詳情請參閱 node.js 全域變數。

Rspack 會將 global 替換為代理物件並處理其中的相容性問題。

global['property']

__webpack_require__.g['property'];

// webpack/runtime/global
__webpack_require__.g = (function () {
  // compatibility code
})();

__filename#

取決於設定 node.__filename。

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

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

__filename

'src/main.js';

__dirname#

取決於設定 node.__dirname。

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

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

__dirname

'src';

import.meta (ESM)#

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

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

import.meta
typeof import.meta

{
} // Warning: Direct access to import.meta is not supported (only property access or destructuring is supported)
('object');

import.meta.url#

傳回模組的絕對 file: URL。

import.meta.url
typeof import.meta.url

'file://project_root/src/main.js';
'string';

import.meta.webpackContext#

import.meta.webpackContext 是 webpack 特有的函式，允許您動態匯入一組模組。

您可以在程式碼中使用 import.meta.webpackContext，而 Rspack 將在建置過程中解析和參考相符的模組。

• 類型

function webpackContext(
  /**
   * A directory to search.
   */
  request: string,
  options?: {
    /**
     * Whether subdirectories should be searched.
     * @default true
     */
    recursive?: boolean;
    /**
     * A regular expression to match files.
     * @default /^\.\/.*$/ (any file)
     */
    regExp?: RegExp;
    /**
     * Module loading mode.
     * @default 'sync'
     */
    mode?: 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once';
    include?: RegExp;
    exclude?: RegExp;
    preload?: boolean | number;
    prefetch?: boolean | number;
    chunkName?: string;
    exports?: string | string[][];
  },
): Context;

• 範例

// Create a context, with files from the test directory that
// can be required with a request ending with `.test.js`.
const context = import.meta.webpackContext('./test', {
  recursive: false,
  regExp: /\.test\.js$/,
});

// Create a context with all files in the parent folder and
// descending folders ending with `.stories.js`.
const context = import.meta.webpackContext('../', {
  recursive: true,
  regExp: /\.stories\.js$/,
});

// If mode is set to 'lazy', the underlying modules will be loaded asynchronously
const context = import.meta.webpackContext('./locales', {
  recursive: true,
  regExp: /\.json$/,
  mode: 'lazy',
});

內容 API#

import.meta.webpackContext() 傳回的內容是一個接受 request 引數（模組路徑）的函式。

此函式有三個屬性：resolve、keys 和 id。

• resolve 是一個函式，並傳回已解析請求的模組 ID。
• keys 是一個函式，傳回內容模組可以處理的所有可能請求的陣列。
• id 是內容模組的模組 ID。這對於 module.hot.accept 可能很有用。

如果您想要請求目錄中的所有檔案或符合模式的檔案，這會很有用。

考慮一下您有這樣的資料夾結構的情形

您可以使用 import.meta.webpackContext() 來動態匯入資料夾中的所有元件檔案

const componentsContext = import.meta.webpackContext('./components', {
  recursive: false,
  regExp: /\.js$/,
});

componentsContext.keys().forEach(fileName => {
  const componentModule = componentsContext(fileName);

  // Here you can use your module, for example console.log
  console.log(componentModule);
});

import.meta.webpackContext() 簡化了模組匯入的過程，特別是在您需要管理大量檔案時。使用時，請避免比對不必要的檔案，因為這可能會導致建置時間和輸出大小顯著增加。

import.meta.webpackHot#

module.hot 的別名，但是 import.meta.webpackHot 可以在嚴格的 ESM 中使用，而 module.hot 不能。

執行時期#

__webpack_hash__#

它提供對編譯雜湊值的存取。

__webpack_hash__

__webpack_require__.h();

// webpack/runtime/get_full_hash
__webpack_require__.h = function () {
  return '9210c6f859a51c6f9a62';
};

__webpack_runtime_id__#

存取目前進入點的執行時期 ID。

__webpack_runtime_id__

__webpack_require__.j;

// webpack/runtime/runtime_id
__webpack_require__.j = '909';

__webpack_public_path__#

等於設定選項的 output.publicPath。

__webpack_public_path__

__webpack_require__.p;

// output.publicPath !== "auto"
__webpack_require__.p = 'output.publicPath';
// output.publicPath === "auto"，
__webpack_require__.p = 'calculated from document/location';

__webpack_base_uri__#

在執行時期取得或變更基本 URI。

__webpack_base_uri__

__webpack_require__.b;

// chunk loading
__webpack_require__.b = document.baseURI || self.location.href;

__webpack_nonce__#

Rspack 能夠將 nonce 新增到它載入的所有指令碼。若要啟用此功能，請設定 __webpack_nonce__ 變數並將其包含在您的進入指令碼中。

__webpack_nonce__ = 'your_nonce_code';

__webpack_require__.nc = '2312312';

// webpack/runtime/load_script
if (__webpack_require__.nc) {
  script.setAttribute('nonce', __webpack_require__.nc);
}

模組#

__webpack_modules__#

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

__webpack_modules__

var __webpack_modules__ = {
  'main.js': function () {
    __webpack_require__.m;
  },
};
__webpack_require__.m = __webpack_modules__;

__webpack_module__#

提供存取當前 module 的能力。 module 在嚴格的 ESM 中不可用。

__webpack_module__

"main.js": function(renamed_module) {
  renamed_module
}

__webpack_module__.id#

提供存取當前模組 ID (module.id) 的能力。 module 在嚴格的 ESM 中不可用。

__webpack_module__.id

"main.js": function(renamed_module) {
  renamed_module.id
}

__webpack_require__#

原始的 require 函式。此表達式不會被 Parser 解析以查找依賴關係。

__webpack_require__('./dep.js')

"main.js": function(_, __, renamed_require) {
  renamed_require('./dep.js')
}

__non_webpack_require__#

產生一個不會被 webpack 解析的 require 函式。如果存在全域的 require 函式，可以用它來做一些很酷的事情。

__non_webpack_require__('outer.js')

"main.js": function(_, __, __webpack_require__) {
  require('outer.js')
}

__webpack_is_included__#

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

if (__webpack_is_included__('./dep.js')) {
  // do something
}

if (true) {
  // do something
}

__resourceQuery#

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

require('file.js?test');

__resourceQuery

'?test';

__webpack_exports_info__#

在模組中，可以使用 __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>.<exportProperty1>.<exportProperty2>.used
• 使用 __webpack_exports_info__.<exportName>.canMangle 檢查導出是否可以被混淆

if (__webpack_exports_info__.someUsedExport.used) { }
if (__webpack_exports_info__.someUnusedExport.used) { }

if (true) {
}
if (false) {
}

程式碼塊 (Chunks)#

__webpack_chunkname__#

取得當前程式碼塊的名稱。

__webpack_chunkname__

__webpack_require__.cn;

// webpack/runtime/chunk_name
__webpack_require__.cn = 'main';

__webpack_chunk_load__#

內部的程式碼塊載入函式。接受一個參數

• chunkId：要載入的程式碼塊的 ID。

__webpack_chunk_load__

__webpack_require__.e;

// webpack/runtime/ensure_chunk
__webpack_require__.e = function (chunkId) {
  // return chunk loading promise
};

當一個程式碼塊載入失敗時，從替代的公用路徑載入程式碼塊的範例

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_get_script_filename__#

它透過程式碼塊 ID 提供程式碼塊的檔案名稱。

__webpack_get_script_filename__

__webpack_require__.u;

// webpack/runtime/get_chunk_filename
__webpack_require__.u = function (chunkId) {
  // ...
};

它是可賦值的，允許更改運行時使用的檔案名稱。例如，它可以被用來確定載入程式碼塊時的最終路徑。

const oldFn = __webpack_get_script_filename__;

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

模組聯邦 (Module Federation)#

__webpack_share_scopes__#

此物件在遠程容器中用作共享作用域，並填充來自主機的已提供模組

__webpack_init_sharing__#

此方法用於初始化主機容器中共享作用域的模組。

System.js#

__system_context__#

當 output.libraryTarget="system" 時來自 System.js 的上下文

Rspack#

__rspack_version__#

當前 Rspack 版本，預設為 @rspack/core/package.json 中的版本，可以通過 experiments.rspackFuture.bundlerInfo.version 修改。

__rspack_version__

__webpack_require__.rv;

// webpack/runtime/rspack_version
__webpack_require__.rv = '0.7.4';

__rspack_unique_id__#

當前打包器的 ID，值為 bundler={bundler}@{version}： - bundler：預設為 "rspack"，可以通過 experiments.rspackFuture.bundlerInfo.bundler 修改。

• version：預設為 @rspack/core/package.json 中的版本，可以通過 experiments.rspackFuture.bundlerInfo.version 修改。

__rspack_unique_id__

__webpack_require__.ruid;

// webpack/runtime/rspack_unique_id
__webpack_require__.ruid = 'bundler=rspack@0.7.4';